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

我试着从Mike Bostock的直方图示例开始：

起初，我只是试图改变数据和域，以了解它是如何工作的，并更接近我所需要的。但是在这样做的时候，我的脚本抛出了一个错误，因为矩形上的宽度为负

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

.attr("width", x(data[0].dx) - 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);

更新：这个问题的答案是：实际上给出了我想要的图表布局，尽管Lars认为我的域函数导致了问题是正确的

这里有一个更新的提琴（注意，由于域问题，第一个和最后一个栏的高度不正确）

我用barWidth变量替换了width函数：

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

---

这只是你设置

x

量表的方式。假设所有值都在区间（60,95）内，但实际情况并非如此。对于小于60的值，将得到负数

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

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

---

这只是你设置

x

量表的方式。假设所有值都在区间（60,95）内，但实际情况并非如此。对于小于60的值，将得到负数

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

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

---

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

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

x(data[0].dx) - 1

与

通常，您可以使用以下工具定义x比例：

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

然后，上面的代码段（设置条宽度）变成：

---

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

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

x(data[0].dx) - 1

与

通常，您可以使用以下工具定义x比例：

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

然后，上面的代码段（设置条宽度）变成：

---

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