[英]d3.js right align nested bar chart
我正在使用此d3.js示例,并希望将图表的整个方向更改为从右到左。
我能够反转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%");
我相信我必须将每个条形上的转换设置为图表宽度-条形宽度,但是将ANY转换应用于包含的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)。
为什么没有在此处应用变换,这甚至是使条形正确对齐的正确方法? 我还需要文本位于条形图的右侧而不是左侧,并且看来更改附加顺序在这方面没有区别。
这个特定示例的问题在于代码有点混乱rect
元素的位置设置在各个不明显的位置。 特别是,您正在设置的转换将立即被其他代码覆盖。
我已经修改了示例以执行您在这里想要的操作。 关键点是我将包含所有条的g
元素移到右侧
var bar = svg.insert("g", ".y.axis")
.attr("class", "enter")
.attr("transform", "translate("+width+",5)")
.selectAll("g")
// etc
并将rect
元素的x
位置设置为其负宽度
bar.append("rect")
.attr("x", function(d) { return width-x(d.value); })
.attr("width", function(d) { return x(d.value); })
.attr("height", barHeight);
需要以这种方式在代码中的其他位置设置x
位置-几乎肯定有更优雅的方法可以做到这一点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.