【d3.js】v3からv4とかv5にしたらいろいろ動かない

概要

d3.jsのバージョンを上げたらいろいろ動かなくなったのでメモ。

動かなくなったもの

その１：「attr」が動かない！

Uncaught TypeError: Cannot read property 'attr' of null

もうちょっと詳しく言うと、attr自体は大丈夫なんですけど、複数の設定を書けなくなったみたいです。
v3ではattrの中に複数の値を詰め込んでいました。

.attr({
  aaa: 'aaa',
  bbb: 'bbb',
})

みたいに。
それで複数の値を詰め込むためには、attrsにすればいいみたいです。
と言うことで、安直に「attr」を「attrs」にするじゃないですか。
そうしたら、

.attrs is not a function

と、言われました。
調べてみると、d3-selection-multiってのを使わないとattrsが使えないらしい!?となりました。
加えて、コミッターらしき人が

d3-selection-multi is available but not recommended by default.

と、デフォルトでは推奨していないとのことで、どうするのが最善の策かがわからずに、とりあえずattrに複数に詰め込んでいるものをattrにするということをすることになりました。

その２：「ease」が動かない！

そもそも私の使い方に問題があったのかもしれませんが、以下のようにtextに対してeaseを設定していました。

.append("text")
.ease("bounce")

そうしたところeaseのところでエラーが起きてました。
textではeaseは動かなかったもののrectに対してはeaseは問題なく動きました。
まぁ確かにtextにeaseって変なので、v3ではゆるーく許容されていたことがv4。v5で厳格に適切なプロパティをセットしているかをみるようになっているのかな、と感じました。

その３：「d3.scale」がundefined！

var xScale = d3.scale.linear()
               .domain([0, 50])
               .range([0, 100])
               .nice();

ということをしようとしたら、エラーが発生。
調べてみるとv4以降はd3.scaleLinearを使うとのこと。

var xScale = d3.scaleLinear()
               .domain([0, 50])
               .range([0, 100])
               .nice();

にしたら動くようになりました。