D3.jsでリソースモニターみたいなグラフの作成 version 4.0

比較的最近*1に 4.0 のメジャーバージョンアップされたみたいですね。
また、D3.js 3.0 と 4.0 は互換性がありません。

変更点は公式を参考にして、前回紹介した 3.0 グラフを書き直しました。
d3/CHANGES.md at master · d3/d3 · GitHub

対応後のグラフ

See the Pen D3_v4_LineChart by book_stone (@book_stone) on CodePen.

変更点

正直なところ 3.0 を理解していないので変更したソースも小さいため
あまり参考にならないかもしれませんが、記載させていただきます。

ざっくり大きな点といえば D3 のオブジェクト名が短くなりました。
ほとんどのオブジェクトが d3. と始まるようになったようです。

var xScale = d3.scale.linear() // v3

var xScale = d3.scaleLinear()  // v4

軸も変わりました。orientの指定せず、上下左右の軸
d3.axisTop, d3.axisRight, d3.axisBottom, d3.axisLeft が用意されています。

var yAxis = d3.svg.axis() // v3
   .scale(yScale)
    .orient("left");

var yAxis = d3.axisLeft(yScale); // v4

d3.lineオブジェクトにて、interpolateが使用できなくなり、
かわりにcurveが使えます。curveに用意されているオブジェクトを渡すことで使用できます。
用意されている種類もたくさんありますので色々試すと面白いかもしれません。
GitHub - d3/d3-shape: Graphical primitives for visualization, such as lines and areas.

var line = d3.svg.line()
    .x(function(d,i) { return xScale(i); })
    .y(function(d,i) { return yScale(d); })
    .interpolate("linear"); // v3

var line = d3.line()
    .x(function(d,i) { return xScale(i); })
    .y(function(d,i) { return yScale(d); })
    .curve(d3.curveLinear); // v4 これは直線

curveのパラメータを渡すときは下記のように。

var line = d3.line()
    .x(function(d,i) { return xScale(i); })
    .y(function(d,i) { return yScale(d); })
    .curve(d3.curveCatmullRom.alpha(0.5)); // v4

そのほか、アニメーションの個所も変更になったようです。
大幅に変更されているようですが、メソッドチェインの考え方は同じかと感じました。

*1:2016/6月末ごろに4.0にアップデートされたようです。