d3.jsのチュートリアルが動かない【v3とv4/v5の違い】

表現力の高いデータビジュアライゼーションのJavaScriptライブラリ d3.js (Data-Driven Documents) のチュートリアルが、v3とv4/v5の違いで動かなくてハマったので解決のログです。

【問題】 「ds.jsのチュートリアルが動かない」

再現手順

公式サイトからライブラリをダウンロードします。（この時点でver5.12.0）

Download the latest version (5.12.0) here:
d3.zip

<script src="d3.min.js"></script>

Gitでサンプルを閲覧
https://github.com/d3/d3

チュートリアルの「Let’s Make a Bar Chart」を試します。
https://github.com/d3/d3/wiki/Tutorials

See the Pen D3 Bar Chart by Mike Bostock (@mbostock) on CodePen.

ローカルで実行してみると、あれ動きません。

【原因と解決策】 「ds.js v3とv4/v5のアップデート差分」

【原因】

Developers Toolsでデバックしていると、どうやら

Uncaught TypeError: Cannot read property 'liner' of undefined

scale.liner()がエラーになっているようなので調べると

Version 3	scale.linear()
Version 4以降	scaleLinear()

に変わっているようです。

あとで見たら、チュートリアルにもv4未対応とありましたね。

Wiki ▸ Tutorials

Please feel free to add links to your work!!

Tutorials may not be up-to-date with the latest version 4.0 of > D3; consider reading them alongside the latest release notes, > the 4.0 summary, and the 4.0 changes.

【解決策】

v3系scale.liner()関数を、v4/v5系scaleLinerに直します。

HTML

<div class="chart"></div>

CSS

.chart div{
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

JavaScript(修正)

var data = [4, 8, 15, 16, 23, 42];

var x = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });
</script>

動きました！

まとめ

d3.jsのver.3とver.4以降で大きな違いあるのは知っていましたが、まだv3系のコードも多く残っているようです。書籍もver3での解説しているモノも多いです。

ver.4→ver.5はマイナーアップデートとで、そこまで大きな違いはありません。うまくいかない時はVersion確認してみることをオススメいたします。

Changes in D3 5.0
https://github.com/d3/d3/blob/master/CHANGES.md

関連情報