我正在使用this d3.js example,我希望将图表的整个方向更改为从右到左。
我能够反转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
上也没有设置变换,结果是在结果页面中翻译(0,0)。
为什么变换没有在这里得到应用,这是否正确的方法使条右对齐?我还需要将文本放在条形图的右侧而不是左侧,似乎更改附加顺序在这方面没有任何区别。
答案 0 :(得分:1)
这个特殊例子的问题是代码有点令人困惑 - rect
元素的位置设置在各种非显而易见的地方。特别是,您设置的转换会立即被其他代码覆盖。
我修改了示例以执行您想要的操作here。关键点是我正在将包含所有条形的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);
x
位置需要以这种方式在代码中的其他几个位置设置 - 几乎可以肯定有更优雅的方法来执行此操作。