그래프 축 정렬 문제

Question

현재 2 개의 서수 축을 사용하여 아주 기본적인 그래프를 작성 중입니다. X 축은 4 개의 범주를 나타내며 Y 축은 3을 나타냅니다. 어떤 이유로 인해 플롯 된 원이 플롯 된 축과 정렬되지 않습니다. 예제는 http://jsfiddle.net/SrdY6/에서 확인할 수 있습니다. 문제는 번역과 관련된 것으로 보인다,하지만 거기에 유일한 번역은 큰 포함 <g> 요소에 적용됩니다

var lunchgraph = svg.append("g") 
    .attr("class", "lunchgraph") 
    .attr("transform", "translate(" + lunchmargin.left + "," + lunchmargin.top + ")"); 

내가 지금 몇 시간 동안보고 된 적이 있지만 상황이 이동하는 위치를 발견 할 수 잘못된 ... 더 많은 통찰력을 가진 사람?

Answer 1

게시 후 수분 내에 답변을 찾기 위해 밖에있는 질문을 던지고 공개 수치심을내는 것만 큼 없습니다.

rangeBands 또는 rangeRoundBands으로 구성된 서수 축의 경우 배율 기능은 주어진 입력의 더 낮은 값을 반환합니다. 플롯을 정확한 범주 레이블에 정렬 시키려면 rangeBand의 절반을 계산 된 좌표에 추가해야합니다.

그래 : 번역에 문제가 없지만 그래프에 원을 배치하기위한 좌표는 cx과 cy입니다.

올바른 코드 :

.attr("cx", function(d) { return x(d.label) + x.rangeBand()/2 ;}) 
    .attr("cy", function(d) { return y(d.sqid) + y.rangeBand()/2 ; })