d3 数据缩放问题

Question

过了一段时间我终于想通了如何在 d3 linear 中缩放数据。但是，如果您查看以下屏幕截图，您可能会注意到数字似乎没有适当缩放：所以：例如4.55 和 16.2 的长度几乎相同，但它们不应该如此（当我在 0 到 565 之间缩放时，4 应该更靠近左边）

这就是我创建线性刻度的方式：

var scaledData = d3.scale.linear()
                      .domain(d3.extent(data, function(d){return d.Betrag;})) 
                      .range([0, width-35]);

这就是我绘制条形图的方式：

var bar = chart.selectAll("g")
      .data(data)
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

  bar.append("rect")
    .attr("width", function(d) { return scaledData(Math.abs(Math.round(d.Betrag))); })
    .attr("height", barHeight - 1);

  bar.append("text")
    .attr("x",function(d) { return scaledData(Math.abs(Math.round(d.Betrag)))+3; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) { return Math.abs(d.Betrag); });
  });

我在这部分尝试了不同的东西 scaledData(Math.abs(Math.round(d.Betrag))) 但无论我做什么，它都没有按照我的想法去做......也许作为一个新手我仍然不明白天平事情完全......我认为问题出在我如何设置域。如果我用 [0,2000] 替换 d3.extend 函数，一切都很好...

Answer 1

您必须出示您的数据才能确定，但我认为您的数据中有负值，因此您的域看起来大约从 [-600, 1800] 开始。但是当你计算你的宽度时，你首先取数据的绝对值，所以你的最低可能值为 0。解决方案是在你的 d3.extent 访问器函数中，以评估你的数据的绝对值（如果这实际上是什么你想要）。

d3 数据缩放问题

d3 data scaling issue

javascript

scale

d3.js