表現力の高いデータビジュアライゼーションの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
関連情報