Selecting arc/element

Question

In the sunburst, how can I make code select a root arc, just after all arcs was 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 would be passed as "d" to the "function" on click on the middle arc.

(its data goes first in the json file)

Update 1: Changing the code like 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 doesn't look right and isn't general.

Update 2: I tried several selects, 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 array of size 1 with children:

0: SVGPathElement
   __data__: Object

, where __data__ is the object I'm after, but I can't manage to select it.

Benevolence

To be clear: are you trying to have code select the element, or are you asking about the user clicking on an arc and processing that directly? – Oppugnant

Trying to have code select the element, straight after the arc generation was done. – Benevolence

I still don't understand what your question/problem is, then. You would use the d3.select() method. Have you tried that? If so, what is your code, and what error did you get (and what were you expecting instead)? – Oppugnant

Answer 1

The root node is the one with a "depth" attribute set to 0. So you can say:

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

Your attempts above weren't working because D3 uses CSS3 to select elements. So you can only use d3.select and d3.selectAll with CSS3 selectors i.e. you can't access the data bound to each element this way. The way to filter on the bound data is to use selection.filter.

D3 selections are literally an array of elements, see the "Operating on Selections" section.

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

Fondness

Thanks! This is extremely useful. Though, the selection you mentioned returns same object as d3.select("[t_name='flare']"). – Benevolence

I don't know what t_name is - is that an attribute that you've set? I've added some information to the answer about what D3 selections are and retrieving bound data. – Fondness

Regarding t_name - found this attribute of svg arcs using Element Browser in Developer Tools. – Benevolence

My apologies - it was me who added the t_name attribute. Corrected the code in the question. – Benevolence