0

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

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

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

问题是矩形之间不同大小的间隙。我怀疑这是因为线路径的坐标是十进制的，并且在计算矩形的宽度时会出现问题。

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

注意灰色背景块之间的间隙

这就是我添加矩形的方式：

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

2 回答 2

1

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

可以通过指定比例以将数字四舍五入到最接近的整数来解决该问题。这可以通过使用 scale.rangeRound 来完成，它还将比例的插值器设置为 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/

于 2013-09-11T18:20:17.923 回答
0

您的 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/

于 2013-09-11T14:35:04.687 回答