D3 だけで簡単に実行できます: http://bl.ocks.org/4678148任意の要素をクリックすると、その要素がフォーカスselected
され、クラスが設定された状態で90 度に遷移します。
また、右上の凡例テキストが、選択した要素の名前に変わります。この結合を実現するコードの部分は次のとおりです。
d3.selectAll("path").on("click", function (d, i) {
var newAngle = - (d.x + d.dx / 2);
innerG
.transition()
.duration(1500)
.attr("transform", "rotate(" + (180 / Math.PI * newAngle) + ")");
// Set the class "selected" on the chosen element.
path
.classed("selected", function (x) { return d.name == x.name; });
// Update the text box with the right context
// This can be arbitrarily complex to show as many details about the
// object as required.
textBox.data(["Clicked: " + d.name])
.text(String);
});
アップデート
クリックした要素が中央に遷移するようなズーム可能な動作については、 hereやhereとほぼ同じコードを使用できます。クリックされたアイテムに関する情報を抽出する方法を示すために、コードに小さな変更を加えました: http://bl.ocks.org/4747342
必要なコードの変更は、以前よりも簡単です。
d3.selectAll("path").on("click", function (d, i) {
// Zooming
path.transition()
.duration(750)
.attrTween("d", arcTween(d));
// Update the text box with the right context
// This can be arbitrarily complex to show as many details about the
// object as required.
textBox.data(["Clicked: " + d.name])
.text(String);
});