0

次の折れ線グラフを少し変更した例に取り組んでいます: http://bl.ocks.org/mbostock/3883245

ここに私の JS フィドルがあります: http://jsfiddle.net/rQ4xE/

目標は、一定期間ごとに異なる背景色のブロックを作成することです。色の変更は難しくありません。でも..

問題は、長方形間のさまざまなサイズのギャップです。これは、ライン パスの座標が 10 進数であり、四角形の幅を計算するときに何かが台無しになるためだと思われます。

私の質問は、間に隙間がないように背景の四角形を描画する良い方法は何でしょうか?

灰色の背景ブロック間のギャップに注意してください

これは、四角形を追加する方法です。

  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

よりエレガントなソリューションを見つけたと思います。

この問題は、数値を最も近い整数に丸めるようにスケールに指定することで解決できます。これは、スケールの補間器を d3.interpolateRound に設定する scale.rangeRound を使用することによって実行できます。

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 座標と幅に float の問題があるようです。両方を丸くしてみてください。

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

EDIT ここにフィドルがあります：http://jsfiddle.net/rQ4xE/3/

于 2013-09-11T14:35:04.687 に答える