D3.js(v4,v5)|選択した要素にHTML属性を追加する

d3.js(v4、v5)で、選択した要素にHTML属性を追加するには、attr()メソッドを使用します。

attr()メソッドの使い方

書式

.attr( “HTML属性名” , “設定する値” )

サンプル

div要素にid属性とclass属性を追加します。

html

javascript

css

これを実行すると、ブラウザに次の棒グラフが表示されます。

Chromeのデベロッパーツールで要素を見てみると、idとclass属性が追加されていることが分かります。

また、Class属性の追加・削除だけなら classedメソッドを使用しても同じことができます。

先ほどの例のjavascriptのみ、以下のように変更します。

第二引数で、trueを指定すると追加、falseを指定すると削除されます。