ドットインストールの動画のD3.jsのバージョンの違いで出るエラー解決方法

ドットインストールで紹介されているD3.jsのバージョンは、v3。
今のバージョンは、v5。

2回のバージョンアップがされているため、細かい関数の名前やらが変更されていて、ドットインストールのコピペでは、エラーになる場面がところどころ。

軽くつまづいたところを適当に上げておく。

SVGの領域を定義して、widthとheightの設定をしているのに、widthとheightが設定されていなかった。

var svg = d3.select("body").append("svg")
	.attr({width:w,
	height:h});

var circle = svg.selectAll("circle");

発生したエラーが以下。
領域を設定しているものの、SVGのwidthとheightがゼロなため、null扱いとなり、selectAllできないとエラーがでている。

Uncaught TypeError: Cannot read property 'selectAll' of null

これがバージョンの違いかは調べてないが、とりあえずv5では、javascriptのオブジェクトでの値設定ができないみたい。

ドットインストールの動画では、複数の値の設定は基本的にオブジェクトを使っているので、ひっかかる。

.attr({width:w,
height:h});

ちょっと面倒だが、一個一個設定する形に変えた。

.attr("width", w)
.attr("height", h);

Axisの設定でv3では、.scale.linear()を使っている。

var xScale = d3.scale.linear()
					.domain([0, d3.max(dataset)])
					.range([padding, w - padding])
					.nice();

これが以下に変わっている。

var xScale = d3.scaleLinear()
					.domain([0, d3.max(dataset)])
					.range([padding, w - padding])
					.nice();

.scaleLinear()に変わっている。

もしかするとd4から変わってるかもしれない、知らない。

短くなっていて助かる。

ここらへんから、この関数変わってそうだな、とわかってきた。

冗長な2段階構成の関数は、まとめられているっぽい。

軸の位置と長さを設定する関数は、.scaleと.orient

var xAxsis = d3.svg.axis()
 					.scale(xScale)
 					.orient("bottom");

変更後がこれ。

var xAxis = d3.axisBottom(xScale);

あぁ。スッキリ。

エラー解決方法なので、stackoverflowにのっけた方が、恩恵を受けるプログラマーは多そうだが、自分でのっけてわざわざ自分で解法のせるのも面倒なので、ブログに載せました。

以上、終わり！

ストックドッグ