javascript - d3数据缩放问题

一段时间后，我终于想出了如何在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函数，那一切都很好...

最佳答案

您必须先确定要知道的数据，但是我认为您的数据中存在负值，因此您的域看起来像是从[-600，1800]开始。但是，当您计算宽度时，首先要获取数据的绝对值，因此最低的可能值为0。解决方案是在d3.extent访问器函数中，用于评估数据的绝对值（如果这实际上是您想要的） ）。