d3.js 중첩 된 막대 차트 오른쪽 정렬

Question

저는 this d3.js example와 협력 중이며 차트 전체 방향을 오른쪽에서 왼쪽으로 변경하려고합니다.

var x = d3.scale.linear().range([width, 0]); 

및 y 축으로의 위치 :

svg.append("g").attr("class", "y axis") 
       .attr("transform", "translate("+width+", 0)") 
       .append("line").attr("y1", "100%"); 

은 내가이 (가) 각 줄의 변환을 설정해야합니다 생각

나는 X 축 스케일을 반전 할 수 있었다 차트의 폭 - 바의 폭은 임의의 변환을 포함하는 것으로 적용하면 g는 효과가 없습니다. 난 그냥 고정 된 값으로 테스트를 할 경우에도 없음 변환

function bar(d) { 
    var bar = svg.insert("g", ".y.axis") 
       .attr("class", "enter") 
       .attr("transform", "translate(0,5)") 
       .selectAll("g") 
       .data(d.children) 
       .enter().append("g"); 
    //DOESNT WORK 
    bar.attr("transform", function(n){ return "translate("+ (width - x(n.value)) +", 0)"; }) 
    .style("cursor", function(d) { return !d.children ? null : "pointer"; }) 
    .on("click", down); 

    bar.append("text").... 

    bar.append("rect").... 

    return bar; 
} 

이 bar에 설정되어, 결과는 결과 페이지에서 (0,0) 번역입니다.

변환이 적용되지 않는 이유는 무엇이며 바를 올바르게 정렬하는 올바른 방법일까요? 또한 텍스트가 왼쪽 대신 막대의 오른쪽에 있어야하고 추가하는 순서를 변경하면이 점에 차이가없는 것으로 보입니다.

Answer 1

이 특정 예제의 문제는 코드가 다소 혼란 스럽다는 것입니다. 즉, rect 요소의 위치가 여러 가지 명확하지 않은 위치에 설정되어 있습니다. 특히, 설정중인 변환은 다른 코드로 즉시 덮어 씁니다.

내가 원하는 것을 수행하도록 예제를 수정했습니다. here. 핵심 포인트는 내가 부정적인 폭을

bar.append("rect") 
    .attr("x", function(d) { return width-x(d.value); }) 
    .attr("width", function(d) { return x(d.value); }) 
    .attr("height", barHeight); 

x 위치 요구 할 수있는 권리

var bar = svg.insert("g", ".y.axis") 
    .attr("class", "enter") 
    .attr("transform", "translate("+width+",5)") 
.selectAll("g") 
// etc 

모든 막대를 포함하는 g 요소를 이동하고 rect 요소의 x 위치를 설정하고있어 점이다 이런 식으로 코드의 다른 몇 군데에 설정해야합니다. 이렇게하는 것이 훨씬 더 우아한 방법입니다.