d3.jsな日々

d3.jsでデータ可視化する際の覚書です

マウスクリックの発信元で処理を変える

テキストクリックで処理を行うには、

d3.select("p")
    .on("click", function(){....

のようになる。このケースでは、pタグをつけたテキストをクリックすると、function(){}で定義された処理が行われる。


では、複数のpタグテキストがある場合はどうするか。次のようになる。

d3.selectAll("p")
    .on("click", funciton(){
    var paragraphID = d3.select(this).attr("id");
    ...

これは、paragraphIDに、クリックされたpタグのid属性が代入される。

<p id="add">Add Items</p>
<p id="remove">Remove Items</p>

後は、このparagraphIDの内容で処理を変えれば良い。