Question

Please take a look to this simple jsfiddle: http://jsfiddle.net/perikut/9qUVW/2/ (sorry if using Firefox, I don’t know why it doesn’t look good…)

In our object can we use another word than ‘children’ to indicate where extract data from? (all examples I see follow this data structure, see below). Where should we indicate that?

I consider my code quite deficient (see the jsfiddle), as I am forced to declare two times the ‘group’ parameter in order to show/hide childrens from a group/parent.

There would be no way to directly select group1’s children nodes and apply animations over? I want a much more complex data structure in the future, so I need to know this kind of basics before.

Current data structure:

data = {
name:'root',
group:'no_group',
children:[
    {
        group: 'group1',
        children:[
            { group:'group1',name:'a1',value:10,color:'red' },
            { group:'group1',name:'a2',value:40,color:'lightcoral' }
        ]
    }
    , { .... } 

Answer 1

In D3’s hierarchical layouts, all nodes are populated with a set of standard attributes, including a “parent” attribute. So you can avoid specifying a “group” attribute, and use “parent” instead when selecting the children of a particular node:

d3.selectAll("circle").filter(function(d) { return d.parent.name === "foo"; });

Alternatively, you can compare by object reference if you have a reference to the node object itself.

var parent = nodes.filter(function(d) { return d.name === "foo"; });
d3.selectAll("circle").filter(function(d) { return d.parent === parent; });

Here I’m assuming that each node has a “name” attribute.

You also mentioned using retrieving children from a different attribute. Yes, this can be achieved using the “children” accessor. Note that this will store a node’s children in an attribute called “children” on that node, overwriting anything that may be there already.