5

D3.js の概念を学ぼうとしています。現在の要素を前の要素に関連付けたいと思うかもしれません。折れ線グラフを作成する必要があり、ポイントからポイントへと描画していると仮定しましょう。私はこのようなものを作成するかもしれません:

var data = [200, 300, 250];

var svg = d3.select('body').append('svg');
var lines = svg.selectAll('line').data(data);

lines.enter()
  .append('line')
  .attr( {
    'stroke-width': 2,
    stroke: '#000',
    x1: 0, y1: 0,
    x2: function(d, i) { return i * 50 + 50 },
    y2: function(d) { return d - 180; }
  });

(コデペン)

ただし、 myx1と のy1値がゼロであることに注意してください。これらの値を前のデータから取得したいと考えています。前のデータにアクセスするにはどうすればよいですか (データがない場合は 0,0 と仮定します)。

注:折れ線グラフを描画する適切な方法は、単一のパスを作成し、d3.svg.lineジェネレーター関数を使用することです。ここで問題を解決しようとしているわけではありません。私は核となる概念を理解しようとしています。

4

1 に答える 1

2

私は一つのアプローチを思いつきました。現在のデータムのインデックスを減らします。

var data = [200, 300, 250];

var svg = d3.select('body').append('svg');
var lines = svg.selectAll('line').data(data);

function x(d, i) { return i * 50 + 50; }
function y(d) { return d - 180; }
function previous(func, seed) {
  return function(d, i) {
    return i > 0 ? func(data[i-1], i-1) : (seed || 0);
  }
}

lines.enter()
  .append('line')
  .attr( {
    'stroke-width': 2,
    stroke: '#000',
    x1: previous(x), 
    y1: previous(y),
    x2: x,
    y2: y
  });
于 2013-05-22T13:20:37.833 に答える