反转垂直条形图的绘制方式 [英] reverse how vertical bar chart is drawn
本文介绍了反转垂直条形图的绘制方式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何反转垂直条的绘制方式?我希望将其从底部绘制到顶部.维护数据集的正确表示很重要
How can I reverse how my vertical bar is drawn? I want it to be drawn from the bottom to the top. It is important to maintain the right representation of the dataset
https://jsfiddle.net/adai183/ztsh1ptx/
var dataset = [ 10, 80, 5, 5];
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("fill", "rgb(250, 128, 114)")
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h - (d * 4);
})
.attr("width", w / dataset.length - barPadding)
.attr("height", 0)
.transition().duration(750).ease("linear")
.attr("height", function(d) {
return d * 4;
});
推荐答案
这样做:
.attr("y", function(d) {
return h; //set y to max height
})
.attr("width", w / dataset.length - barPadding)
.attr("height", 0)//height of the bars initially is 0
.transition().duration(750).ease("linear")//on transition
.attr("y", function(d) {
return d*4;//set the y to its value
})
.attr("height", function(d) {
return h - (d * 4);//set the height to max height - y's value
})
工作代码此处
编辑
要解决该问题,请对y进行缩放:
For solving that problem make a scale for y:
var y = d3.scale.linear()
.range([h, 0])
.domain([0,100]);//since values vary between 0 and 100
现在使用此比例尺来增加条形图的高度.
Now use this scale to give height to your bar chart.
.transition().duration(750).ease("linear")
.attr("y", function(d) {
return y(d);
})
.attr("height", function(d) {
return h - y(d);
})
工作示例此处
希望这会有所帮助!
这篇关于反转垂直条形图的绘制方式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文