Выбросы в топорах в D3 (Смешивание числовых и категориальных спецификаций)

Я пытаюсь установить что-то в D3, где у меня есть ось для некоторой коллекции данных. Однако в случае выбросов для данных, я хотел бы положить эти выбросы в ведро по оси. Есть ли способ, которым я мог бы указать «отметку выброса» для оси, которая будет служить разделом для размещения этих точек данных?Выбросы в топорах в D3 (Смешивание числовых и категориальных спецификаций)

Example: [1,3, 7, 12, 2048] 
    *  *   *     *    * 
--1--2--3--4--5--6--7--8--9--10--11--12--13--14--15--O--

Это следующий код, который у меня есть. Мне кажется, что весы работают только численно, так что я не знаю, как смешивать произвольные категории с числовой шкале ...

 let height = 1000; 
     let width = 1000; 
     let padding = 10; 

     let svgContainer = d3.select("body").append("svg").attr("width", width).attr("height", height); 

     let axisScale = d3.scale.linear().domain([0, 10]).range([ padding, width - padding]); 
     let xAxis = d3.svg.axis().scale(axisScale); 

     let xAxisYValue = height - padding * 3; 
     let xAxisGroup = svgContainer.append("g").attr("transform", "translate(0," + xAxisYValue + ")").call(xAxis);

источник

2016-10-20 Skorpius

я бы, вероятно, создать две отдельные оси и выровняйте их так, что они появляются как один – Mark

Как я уже говорил в моих комментариях, я сделаю это что-то вроде этого:

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> 
 
    body { 
 
    font: 10px sans-serif; 
 
    } 
 
    .axis path, 
 
    .axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
    } 
 
</style> 
 

 
<body> 
 
    <script src="//d3js.org/d3.v3.min.js"></script> 
 
    <script> 
 
    var data = []; 
 
    for (i = 0; i <= 10; i++) { 
 
     data.push({ 
 
     x: i, 
 
     y: Math.random() 
 
     }); 
 
    } 
 
    data.push({ 
 
     x: "Other", 
 
     y: Math.random() 
 
    }); 
 
    data.push({ 
 
     x: "Other", 
 
     y: Math.random() 
 
    }); 
 
    data.push({ 
 
     x: "Other", 
 
     y: Math.random() 
 
    }); 
 

 
    var margin = { 
 
     top: 20, 
 
     right: 20, 
 
     bottom: 30, 
 
     left: 50 
 
     }, 
 
     widthRight = 100, 
 
     widthMain = 600 - margin.left - margin.right - widthRight, 
 
     height = 500 - margin.top - margin.bottom; 
 

 
    var x0 = d3.scale.linear() 
 
     .range([0, widthMain]) 
 
     .domain([0, 10]); 
 

 
    var x1 = d3.scale.ordinal() 
 
     .rangePoints([widthMain, widthMain + widthRight], 2) 
 
     .domain(["Other"]); 
 

 
    var y = d3.scale.linear() 
 
     .range([height, 0]) 
 
     .domain([0, 1]); 
 

 
    var xAxis0 = d3.svg.axis() 
 
     .scale(x0) 
 
     .orient("bottom"); 
 

 
    var xAxis1 = d3.svg.axis() 
 
     .scale(x1) 
 
     .orient("bottom"); 
 

 
    var yAxis = d3.svg.axis() 
 
     .scale(y) 
 
     .orient("left"); 
 

 
    var svg = d3.select("body").append("svg") 
 
     .attr("width", widthMain + widthRight + margin.left + margin.right) 
 
     .attr("height", height + margin.top + margin.bottom) 
 
     .append("g") 
 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
    svg.selectAll("circle") 
 
     .data(data) 
 
     .enter() 
 
     .append("circle") 
 
     .attr("cx", function(d) { 
 
     if (isNaN(d.x)) { 
 
      return x1(d.x); 
 
     } else { 
 
      return x0(d.x); 
 
     } 
 
     }) 
 
     .attr("cy",function(d) { 
 
     return y(d.y); 
 
     }) 
 
     .attr("r", 10) 
 
     .style("fill", "steelblue") 
 
     .style("stroke", "orange"); 
 

 
    svg.append("g") 
 
     .attr("class", "x axis") 
 
     .attr("transform", "translate(0," + height + ")") 
 
     .call(xAxis0); 
 

 
    svg.append("g") 
 
     .attr("class", "x axis") 
 
     .attr("transform", "translate(0," + height + ")") 
 
     .call(xAxis1); 
 

 
    svg.append("g") 
 
     .attr("class", "y axis") 
 
     .call(yAxis); 
 
    </script>

источник

2016-10-20 19:31:30 Mark

Выбросы в топорах в D3 (Смешивание числовых и категориальных спецификаций)

ответ

Смежные вопросы