选择弧/元素

Selecting arc/element

本文关键字:元素 选择      更新时间:2024-04-06

在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']")

它通常返回array:

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

或"未定义"

更新3

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

返回带子级的大小为1的array

0: SVGPathElement
   __data__: Object

,其中__data__是我想要的对象,但我无法选择它。

根节点是"depth"属性设置为0的节点。所以你可以说:

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

您上面的尝试没有成功,因为D3使用CSS3来选择元素。因此,您只能将d3.select和d3.selectAll与CSS3选择器一起使用,即您不能以这种方式访问绑定到每个元素的数据。对绑定数据进行筛选的方法是使用selection.filter.

D3选择实际上是一个元素数组,请参阅"对选择进行操作"部分。

最后,您可以使用selection.datum().

获取元素的绑定__data__属性