Question

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

最初，我只是想改变数据和域，以了解它是如何工作的，并且更接近我需要的东西。但是在这样做时，我的脚本会因为rects上的负宽度而引发错误。

这条线的确是什么，为什么会产生负值？

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

Answer 1

这就是您设置x比例的方式。你假设所有的值都在区间（60,95），而它们不是。对于小于60的值，您会得到负数。

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

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

Answer 2

你是对的，这是由于域名;它在迈克的例子中起作用的原因是他使用的域最小值为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]);

然后上面的片段（设置条宽）变为：

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

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

2 个答案: