Javascript 缩放d3'；s直方图x域原因“；<；的负值无效；rect>；属性"；错误

我试图用D3显示直方图

我从开始尝试改变x域的比例

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

示例中的代码起作用（）：

但这并不是（）：

其他人提到，要缩放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]);

---

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

完成演示

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]);

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