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의 축에서 외각 값 (숫자 및 범주 사양 혼합)

답변

관련 문제