d3.js 右对齐嵌套条形图

我正在与这个 d3.js 示例 http://bl.ocks.org/mbostock/1283663我希望将图表的整个方向更改为从右到左。

我能够反转 x 轴刻度：

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%");

我相信我必须将每个条形上的变换设置为图表宽度 - 条形宽度，但是将任何变换应用于包含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即使我只是用固定值进行测试，结果页面中的结果也是translate(0,0)。

为什么这里没有应用变换，这是否是使条形图右对齐的正确方法？我还需要文本位于栏的右侧而不是左侧，并且似乎更改附加顺序在这方面没有任何区别。

这个特定示例的问题在于代码有点令人困惑——rect元素设置在各种不明显的地方。特别是，您设置的转换会立即被其他代码覆盖。

我已经修改了示例来执行您想要的操作here http://bl.ocks.org/larskotthoff/9173284。关键点是我正在移动g包含右侧所有条形的元素

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

并设置x的位置rect元素为其负宽度

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

The x需要以这种方式在代码中的其他一些位置设置位置 - 几乎肯定有更优雅的方法可以做到这一点。