javascript - 选择圆弧/元素

Question

在sunburst ，如何让代码在生成所有弧之后选择根弧？

例如，在代码中:

var first_arc = ""
.json("../data/flare.json", function(json) {
   var path = vis.data([json]).selectAll("path")
       .data(partition.nodes)
     .enter().append("path")
       .attr("display", function(d) { return d.depth ? null : "none"; })
       .attr("d", arc)
       .attr("t_name", function(d) {return d.name})
       .style("fill-rule", "evenodd")
       .on("click", function(d)...

它会在点击中间圆弧时作为“d”传递给“函数”。

(它的数据在json文件中最先)

更新 1:像这样更改代码......

.style("fill-rule", function(d) {
   if (first_arc == "") first_arc = d; return "evenodd"})

...解决了问题，它返回object:

name: "flare"
children: Array[10]
...

但是这个解决方案看起来不对也不通用。

更新 2:我尝试了几种选择，例如:

first_arc = d3.select("[name='flare']")

它通常返回数组:

0: null
length: 1
parentNode: HTMLHtmlElement
__proto__: Array[0]

或“未定义”

更新 3:

first_arc = d3.select("[t_name='flare']")

返回大小为 1 的 array 及其 child :

0: SVGPathElement
   __data__: Object

，其中 __data__ 是我要查找的对象，但我无法选择它。

Answer 1

根节点是“深度”属性设置为 0 的节点。所以你可以说:

d3.selectAll("path").filter(function(d) { return d.depth === 0; })

您上面的尝试没有奏效，因为 D3 uses CSS3 to select elements .所以你只能将 d3.select 和 d3.selectAll 与 CSS3 一起使用选择器，即您无法通过这种方式访问​​绑定(bind)到每个元素的数据。过滤绑定(bind)数据的方法是使用selection.filter .

D3 selections字面上是一组元素，请参阅“对选择进行操作”部分。

最后，您可以使用 selection.datum() 获取元素的绑定(bind) __data__ 属性.