Arc / Element Selection

Question

In sunburst , how can I make the code, select the root arc right after all the arcs have been generated?

For example, in the code:

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)... 

it will be passed as "d" to the "function" when you click on the middle arc.

(his data goes first in the json file)

Update 1 : changing the code so ...

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

... solved the problem, it returns object :

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

but this solution does not look right and is not general.

Update 2 . I tried several options, for example:

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

it usually returns array :

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

or "undefined"

Update 3 :

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

returns an array size 1 with children:

 0: SVGPathElement __data__: Object 

where __data__ is the object I need, but I cannot select it.

Answer 1

The root of the node is the one whose attribute "depth" is set to 0. Thus, you can say:

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

Your attempts above did not work, because D3 uses CSS3 to select elements . That way you can only use d3.select and d3.selectAll with CSS3 , i.e. you cannot access the data attached to each element in this way. The way to filter by related data is to use selection.filter .

D3 selection is literally an array of elements, see the “Working on Elections” section.

Finally, you can get the bound __data__ property for an element using selection.datum () .