为什么D3折线图中的rects之间存在差距？

Question

我正在研究以下线图的略微修改的示例：http://bl.ocks.org/mbostock/3883245

这是我的JS小提琴：http://jsfiddle.net/rQ4xE/

目标是在一段时间内使背景颜色块不同。改变颜色并不困难。然而..

问题是rects之间不同大小的差距。我怀疑这是因为线路的坐标是十进制的，在计算rects的宽度时会出现乱码。

我的问题是什么是绘制背景幕的好方法，以便两者之间没有空隙？

这是我添加rects的方式：

  svg.append("g").selectAll("rect")
      .data(data)
      .enter()
      .append("rect")
      .attr("class", "area")
      .attr("x", function(d) { return x(d.date) })
      .attr("y", 0)
      .attr("width", function(d, i) {
        not_last = i < data.length - 1;
        return not_last ? (x(data[i+1].date)-x(d.date)) : 0;
      })
      .attr("height", height);

Answer 1

我相信我找到了一个更优雅的解决方案。

可以通过指定比例将数字四舍五入到最接近的整数来解决问题。这可以通过使用scale.rangeRound来完成，它也将scale的内插器设置为d3.interpolateRound。

https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-linear_rangeRound

我改变了这段代码：

var x = d3.time.scale().range([0, width]);

到此：

var x = d3.time.scale().rangeRound([0, width]);

JS小提琴：http://jsfiddle.net/HcC9z/2/

Answer 2

您的x坐标和宽度似乎存在浮动问题。尝试围绕它们。

svg.append("g").selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("class", "area")
  .attr("x", function(d) { return Math.floor(x(d.date)) })
  .attr("y", 0)
  .attr("width", function(d, i) {
    not_last = i < data.length - 1;
    return not_last ? (Math.floor(x(data[i+1].date))-Math.floor(x(d.date))) : 0;
  })
  .attr("height", height);

修改 这是一个小提琴：http://jsfiddle.net/rQ4xE/3/