Hello 使用以下代码使用 D3 创建了一个条形字符
var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25];
var w = 500;
var h = 100;
var barpadding = 1;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var rect = svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function (d, i) {
return i * (w / dataset.length)
})
.attr("y", function (d) {
return (h - d);
})
.attr("height", function (d) {
return (d *2)
})
.attr("width", w / dataset.length - barpadding)
.attr("fill", function (d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
<div class="bar"></div>
正如您在开始时所看到的,我的高度属性就像
.attr("height", function (d) {
return (d *2)
})
现在我已经改成5次了
.attr("height", function (d) {
return (d *5)
})
最佳答案
您需要将“y”属性更改中的“d”变量以及高度相乘。所以 'y' 函数最终为:
.attr("y", function (d) {
return (h - (d * 5));
})
如果您从“y”属性中的“h”中减去,而仅保留“y”属性不变,您会看到图表的高度确实发生了变化。 y 属性函数正在调节每个矩形的位置,以便将其乘以 2 或 5 的扩展部分隐藏在图形下方。
关于javascript - 创建了条形图,但高度没有往复变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35931881/