d3.js를 사용하는 x.ticks()의 텍스트가 올바르지 않습니다.

Question

하나의 막 대형 차트에서 뷰어에 대한 참조를 제공하기 위해 x 축에 평행 눈금을 작성했습니다. 문제는 내가 추가 한 텍스트입니다. 텍스트는 역순으로 정렬되어 올바른 순서를 유지하는 방법을 모릅니다. 나는이 문제를 이해

은 여기에 있습니다 :

chart.selectAll("line") 
     .data(y.ticks(4)) 
    .enter().append("line") 
     .attr("x1", 60) 
     .attr("x2", (barWidth + 50) * data.length) 
     .attr("y1", y) 
     .attr("y2", y) 
     .style("stroke", "#ccc"); 

    chart.selectAll(".rule") 
     .data(y.ticks(4)) 
    .enter().append("text") 
     .attr("class", "rule") 
     .attr("x", 30) 
     .attr("y", y) 
     .attr("text-anchor", "middle") 
     .text(String); 

그러나 나는 그것을 해결하는 방법을 모르겠어요.

Here is the code in jsFiddle. 미리 감사드립니다.

Answer 1

문제는 y 좌표가 맨 위가 아닌 아래에서 계산되므로 모든 값을 반대로해야한다는 것입니다. 업데이트 된 jsfiddle은 here입니다. 관련 변경 사항은 다음과 같습니다.

var y = d3.scale.linear() 
     .domain([0, d3.max(data, function(datum) { return datum.value; })]) 
     .rangeRound([height-20, 0]); 

최저 값 위로 매핑됨을 rangeRound 등의 값을 반전. y 및 height 그에 따라 계산하는 방법을

chart.selectAll("rect") 
    .data(data) 
    .enter() 
    .append("svg:rect") 
    .attr("x", function(datum, index) { return x(index); }) 
    .attr("y", function(datum) { return y(datum.value); }) 
    .attr("height", function(datum) { return height - y(datum.value); }) 
     ... 

이 변경되었습니다.