インタラクティブの実装

SVG要素にインタラクティブ機能を実装するには、.on() を使う。

svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
.................
        .on("mouseover", function() {
		d3.select(this)
		.attr("fill", "orange");
	 })
	.on("mouseout", function(d) {
		d3.select(this)
		.transition()
		.duration(250)
		.attr("fill", "rgb(0, 0, " + (d * 10) + ")");
	});

.on（）の第一引数は動作の種類。
click
mouseover
mouseout
submit
などがある。

第二引数は匿名関数で、引数は、d, dおよびi, 引数なし、のいずれかになる（上の例では、引数なしとdの場合）

特定の要素でマウスEventを発生したくない場合は、CSSで

pointer-events: none;

とする。

d3内でCSSを直接表記するには、

svg.append("text")
   .....
   .style("pointer-events", "none");

とする。