为什么如果我加上这两个陈述，条形图就会反转

D3.js: Why the bar chart turns around if I add this two statements

本文关键字：陈述 两个 条形图 如果 为什么      更新时间：2023-09-26

嘿，我有一个条形图，我知道在svg中x=0和y=0在左上角，所以图形向下显示。如果我加上一些表述，它就反过来了。

var w = 500;
var h = 100;
var barPadding = 1;
var dataset = [5, 4, 6, 7, 8, 10, 2, 3, 4, 5, 6, 25, 34, 54, 64, 32, 11, 32, 42, 5, 10, 15, 20, 25, 30, 35, 40];
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);
var rectangles = 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("width", w / dataset.length - barPadding)
  .attr("height", function(d) {
    return d * 4;
  })
  .attr("fill", function(d) {
      return "rgb(0, 0, " + (d * 10) + ")";
  });
<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>

我有两个问题，A)为什么在例子中他们用h-d来表示y的位置?例如，如果svg的高度是100，而数据集上的数字是60，那么不应该将条置于距左上角y=40的位置上吗?然而，当我渲染这个时，情况并非如此，所有的条形 都显示在相同的y位置上。

为什么用给定的值正确渲染条形图?在这种情况下，是什么让条形图"从底部开始增长"，因为如果我做数学计算，它会让我期望不同的东西。

在本例中，y值在正确位置被截断的原因是svg的高度为100。但是如果仔细检查svg，就会发现每个矩形都超出了svg的底部，它们只是不可见，因为没有溢出。

h-d对于起始y位置是正确的，如果值为60，那么(100-60)将等于40，正如您正确陈述的那样。然而，实际高度应该是d而不是d * 4。我不知道d * 4从何而来

如果你的值是60，那么y将是40，高度将是60这将扩展到svg的底部。

相关文章：