d3.jsのtransitionでスタイルプロパティを変更する際の注意

IE9に手こずったので、ここに備忘録。今更IE9なんざどうだっていいよ！という皆様にはなんの意味もない情報です。

d3.jsのtransition処理でstyleを変更することはよくあることだと思います。その際、IE9の場合、IE10以降では出ないエラーが出ることがわかりましたので、下に記載します。

エラーが出るのは、z-indexをtransitionしようとした場合です。例えば、

d3.select('#hoge').transition().style({'opacity': 0, 'z-index': -100})

のように、透明にしつつ、要素を背面に移動する、というパターンです。この場合、d3側でtransitionのアニメーションに即して、徐々にスタイルプロパティの値を増減するのですが、z-indexのように、値がfloat型に対応しない場合、エラーがでます。

これはIE9のみの問題です。opacityなどのプロパティは、floatを許容しているので、問題はありません。
z-index以外にも、もしかしたらあるかもしれませんね。

取り急ぎ、eachを利用して下記のようにすることで目的の動作が実現します。

var hoge = d3.select('#hoge');
hoge.transition().style('opacity', 0).each('end', function(){
    hoge.style('z-index', -100);
});

※もちろん、複数の要素（例えばセレクタにクラスを指定した場合）に対してeachを実行する場合は、eachの処理を目的に応じて調整してください。