d3.svg.axis() 메서드를 사용하지 않고 D3 축

Question

저는 D3.js의 초보자입니다. 나는 아래 그림과 같이 축을 가진 그래프를 그릴 필요가있다. 어떤 일을해도 나는 많은 도움이 될 것이다.

아래 필기구를 확인했지만 내 요구 사항에 따라 조정할 방법을 모르겠습니다.

Answer 1

축을 완전히 축으로부터 독립적으로 만들 수 있으며 매개 변수를 사용하여 축의 svg 요소를 만들 수 있습니다. 귀하의 경우 수평 라인과 동그라미 + 텍스트가 틱으로 표시됩니다. 특히, 가로선 길이를 얻으려면 눈금 range()을 사용할 수 있습니다. 눈금 영역에서 ticks(n)은 n의 간격을 둔 점을 얻는 역할을합니다. 이 점수를 눈금에 전달하면 틱에 사용할 x 좌표가됩니다.

xScale = d3.scale.linear().domain([0.0, 1.0]).range([0, width]); 
var axis = svg.append('g').attr('class', 'xaxis'); 

axis.append('line').attr({ 
    'x1': xScale.range()[0], 
    'y1': height, 
    'x2': xScale.range()[1], 
    'y2': height 
}); 

ticks = axis.selectAll('.ticks') 
    .data(xScale.ticks(10)) 
    .enter() 
    .append('g') 
    .attr('class', 'tick'); 

ticks.append('circle') 
    .attr({ 
     'cx': function(d) { return xScale(d); }, 
     'cy': height, 
     'r': 5 
    }); 

ticks.append('text') 
    .attr({ 
     'x': function(d) { return xScale(d); }, 
     'y': height, 
     'dy': 20 // Move the text a little under the line 
    }) 
    .text(function(d) { return d; }); 

여기에 최소한의 작업 JSFiddle입니다 : http://jsfiddle.net/LeartS/yGesr/