D3.js - 为什么这个直方图会产生负宽度并抛出错误？答案

【问题标题】：D3.js - why is this histogram generating a negative width and throwing an error?D3.js - 为什么这个直方图会产生负宽度并抛出错误？
【发布时间】：2013-12-03 18:27:20
【问题描述】：

我试图从 Mike Bostock 的直方图示例开始： http://bl.ocks.org/mbostock/3048450

最初，我只是尝试更改数据和域以了解其工作原理并更接近我的需要。但在这样做时，我的脚本会由于矩形上的负宽度而引发错误。

这条线到底在做什么，为什么会产生负值？

.attr("width", x(data[0].dx) - 1)

我的小提琴在这里：http://jsfiddle.net/rolfsf/p96dH/1/

我目前的脚本是这样的：

//generate some data with a median of 75
var values = d3.range(1000).map(d3.random.logNormal(Math.log(75), 0.4));

// A formatter for counts.
var formatCount = d3.format(",.0f");

var margin = {top: 10, right: 30, bottom: 30, left: 30},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

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

var y = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.y; })])
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var bar = svg.selectAll(".bar")
    .data(data)
  .enter().append("g")
    .attr("class", "bar")
    .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });

bar.append("rect")
    .attr("x", 1)
    .attr("width", x(data[0].dx) - 1)
    .attr("height", function(d) { return height - y(d.y); });

bar.append("text")
    .attr("dy", ".75em")
    .attr("y", 6)
    .attr("x", x(data[0].dx) / 2)
    .attr("text-anchor", "middle")
    .text(function(d) { return formatCount(d.y); });

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

更新：这个问题的答案：D3 Histogram with negative values 实际上给了我想要的图表布局，尽管 Lars 是正确的，我的域函数导致了问题。

这里有一个更新的小提琴（请注意，由于域问题，第一个和最后一个条的高度不正确）http://jsfiddle.net/rolfsf/p96dH/3/

我用 barWidth 变量替换了我的宽度函数：

var numbins = data.length;
var barWidth = width/numbins - 1;

【问题讨论】：

标签： d3.js histogram

【解决方案1】：

这就是您设置x 规模的方式。您假设所有值都将在区间 (60,95) 内，但事实并非如此。对于小于 60 的值，您会得到负数。

您可以通过获取域数据的实际范围来轻松解决此问题：

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

【讨论】：

感谢 Lars - 我缩小了域，因为我想查看完整数据集的一个子集，但我想我误用了域函数。我仍然想知道那个宽度函数在做什么——我只是不太了解它。
您正在获取一个数据点并使用 scale 函数将其映射到输出范围。即域中的最小点映射到范围内的最小点，以此类推。

【解决方案2】：

你是对的，这是由于域名；它在 Mike 的示例中起作用的原因是他使用的域最小值为 0。

更好的方法是执行以下操作，替换每次出现的

x(data[0].dx) - 1

与

x(60 + data[0].dx) - 1

通常，您可以使用以下方式定义 x 比例：

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

然后上面的sn-ps（设置条宽），变成：

x(d3.min(datasetBars) + data[0].dx) - 1)

【讨论】：