circles.enter() .attr('cx', function(d, i) { return i * 280 / n + 10; }) のような座標を計算する関数が何箇所かに散らばっていた。 これ、d3.svg.line() を使ったらまとめられるし、便利な interpolate の機能も使えるよ、というのが今回のお話。 d3.svg.line() の使い方 たとえば var line = d3.svg.line() .x(function(d, i) { return i; }) .y(function(d, i) { return d * d; }); としておくことにする。line.x() とすると function(d, i) { return i; } を返してくれるので、関数を再利用してコードが読みやすくなる。line.y() も同様。 さらに、line([5,2,
![D3.js の d3.svg.line() を試してみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/e9702e39bb69f4e4c407a5252379682a795f1331/height=288;version=1;width=512/http%3A%2F%2Ffarm4.staticflickr.com%2F3767%2F10434503954_f41fb09ca6_o.jpg)