CODEWITHSUNDEEP
javascriptjsond3.js
haemka
haemka

Reputation: 130

Accessing nested data from parent

I'm unable to make head or tail of the Nested selctions or at least to adapt the information to my needs.

I have some JSON data here which is formatted like this:

{
  'name': 'root'
  'children': [
    {
      'name': 'child1'
    },
    {
      'name': 'child2'
    }
  ]
}

I need to display the child data within my root node. Let's just assume I have something like this:

nodeEnter.append("text")
      .text(d.name)

So at this point my event handler is the data from root. How can I access the data of the child objects from there, so that my above code would display something like "root (child1, child2)"?

Upvotes: 0

Views: 90

Answers (2)

Florent
Florent

Reputation: 12420

You can try this:

var childNames = d.children.map(function(child) {
  return child.name;
});

nodeEnter
  .append("text")
  .text(d.name + ' (' + childNames.join(', ') + ')');

Upvotes: 1

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

The code to display what you want would be something like this (using nested selections).

var top = d3.selectAll("div").data(data).enter().append("div");
top.append("div").text(function(d) { return d.name; });
// nested selection here
top.selectAll("div.child").data(function(d) { return d.children; })
   .enter().append("div").attr("class", "child")
   .text(function(d) { return d.name; });

Jsfiddle here.

Upvotes: 0

Related Questions