缩放d3的直方图x域导致&#34; <rect>属性的无效负值&#34;错误</RECT>

时间:2014-09-09 06:09:23

标签: javascript d3.js visualization histogram

我尝试使用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]);

1 个答案:

答案 0 :(得分:4)

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

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

完整演示here