缩放 d3 的直方图 x 域会导致“<rect> 属性的负值无效”错误答案

【问题标题】：Scaling d3's histogram x domain causes "Invalid negative value for <rect> attribute" errors缩放 d3 的直方图 x 域会导致“<rect> 属性的负值无效”错误
【发布时间】：2014-11-02 11:10:52
【问题描述】：

我正在尝试使用 D3 显示直方图。

我从official example here 开始并尝试更改x 域的规模。

但是，如果我更改 x 域的比例，则会在各个直方图桶的宽度上出现错误。

示例中的代码有效（jsfiddle）：

var x = d3.scale.linear()
  .domain([0, 1])
  .range([0, width]);

但这不是（jsfiddle）：

var x = d3.scale.linear()
  .domain([0.2, 1])
  .range([0, width]);

其他人提到，为了缩放 x 轴，你应该使用这个：

var x = d3.scale.linear()
  .domain(d3.extent(data))
  .range([0, width]);

但是，这是不可能的，因为尚未创建数据，因为数据需要 x：

var x = d3.scale.linear()
  .domain([60, 95])
  .range([0, width]);

// Generate a histogram using twenty uniformly-spaced bins.
var data = d3.layout.histogram()
  .bins(x.ticks(7))
  (values);

那么如果需要 x 来创建数据，我该如何使用数据来创建 x？

请注意，缩放直方图的大边确实有效：

var x = d3.scale.linear()
  .domain([0, Number(d3.max(values))])
  .range([0, width]);

但是，如果小边不为零，事情就会破裂：

var x = d3.scale.linear()
  .domain([Number(d3.min(values)), Number(d3.max(values))])
  .range([0, width]);

【问题讨论】：

标签： javascript d3.js visualization histogram

【解决方案1】：

您计算条形宽度的方式不适合您的特定用例；特别是它会导致负宽度（如错误消息所示）。您需要取范围的宽度并将其除以项目数（如果您想要间隙，则减去一个小数字）：

.attr("width", (x.range()[1] - x.range()[0]) / data.length - 2)

完整的演示here。

【讨论】：