单独使用 D3 很容易:http: //bl.ocks.org/4678148如果单击任何元素,该元素将被聚焦并转换为 90 度,并selected
在其上设置类。
此外,右上角的图例文本更改为所选元素的名称。实现这种耦合的代码部分是:
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);
});