2

D3を使用して、次の例のような複数の棒グラフ（30以上のグラフ）を表示しています。http：//phrogz.net/js/d3-playground/#MultiBars_HTML ユーザーが棒にカーソルを合わせると、タイトルを変更したいユーザーが操作しているグラフと、ユーザーがカーソルを合わせている値に関する情報。

したがって、次のようなものを追加すると、次のようになります。

bars.on('mouseover', mouseoverfunc);

function mouseoverfunc(d, i) {
// update the title just for this chart..not all charts
a.select("h2").text(function (d) { return "hello"; });
}

マウスオーバーがバー[d3.select（this）]にあることを知っているので、1つのグラフのタイトルだけを変更できるように、親を選択するにはどうすればよいですか？ここに非常によく似た例があります：http：//mbostock.github.com/protovis/ex/minnesota.htmlこれはD3で複製しようとしています

ありがとう。

4

2 に答える 2

1

最も簡単な方法は、おそらく次のようなselectステートメントでそれらを見つけることができる属性をタイトルdivに割り当てることです。

d3.select("[parentBarChartID="+d.id+"]")

あなたのmouseoverfunc。

または、this.parentNode.childNodesを使用してトラバースできるように、DOM要素を階層化して、タイトルノードが見つかるまですべての子をループすることもできます（子ノードをループする方法については、こちらをご覧ください） 。

于 2012-04-27T05:17:12.887 に答える
0

次の2つの例は、バーを個別に選択し、特定のアイテムを選択するコールバックをトリガーする方法を示していると思います...

コールバック関数「synchronizedMouseOver」と「synchronizedMouseOut」で、SVGキャンバス上の複数のオブジェクトの変更がトリガーされることに気付くでしょう...個々のバー、凡例の箇条書き、および凡例のテキスト文字列。同じ方法を使用して、グラフのタイトルを変更します。

これがお役に立てば幸いです。

フランク

于 2012-05-01T22:23:23.963 に答える