创建条形图但高度不是往复变化

Question

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)
              })

但不能看到我的酒吧高度的任何变化任何帮助??

fiddle link

Answer 1

你需要乘以＆＃39; d＆＃39;变量在＆＃39; y＆＃39;属性改变以及高度。所以＆＃39; y＆＃39;功能最终为：

.attr("y", function (d) {
     return (h - (d * 5));
})

如果你从＆＃39; h＆＃39;中删除了在＆＃39; y＆＃39;属性，然后离开了＆＃39; y＆＃39;属性没有变化，您会发现图表的高度确实发生了变化。 y属性函数调节每个矩形的位置，使得扩展部分乘以2或5隐藏在图形下方。