javascript - 创建了条形图，但高度没有往复变化

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

您需要将“y”属性更改中的“d”变量以及高度相乘。所以 'y' 函数最终为:

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

如果您从“y”属性中的“h”中减去，而仅保留“y”属性不变，您会看到图表的高度确实发生了变化。 y 属性函数正在调节每个矩形的位置，以便将其乘以 2 或 5 的扩展部分隐藏在图形下方。