CODEWITHSUNDEEP
javascriptd3.js
Vikram Singh Jadon
Vikram Singh Jadon

Reputation: 1047

access data of child node when clicked on the link in d3 tree layout

I am using d3 collapsible tree example.

I want to access the "name" of the child node associated with the link in the function called when a link is clicked. i have done this till now.

// Enter any new links at the parent's previous position.
          link.enter().insert("path", "g")
              .attr("class", "link")
              .attr("d", function(d) {
                var o = {x: source.x0, y: source.y0};
                return diagonal({source: o, target: o});
              })
              .on("click", function(d){
                  console.log('Clicked : ' + d.name);
              });

In the console "undefined" is getting printed.

The Json data is 

    {
 "name": "A",
 "children": [
  {
   "name": "B",
   "children": [
    {
     "name": "C",
     "children": [
      {"name": "D", "size": 3938},
      {"name": "D", "size": 3812},
      {"name": "D", "size": 6714},
      {"name": "D", "size": 743}
     ]
    },
    {
     "name": "C",
     "children": [
      {"name": "D", "size": 3534},
      {"name": "D", "size": 5731},
      {"name": "D", "size": 7840},
      {"name": "D", "size": 5914},
      {"name": "D", "size": 3416}
     ]
    },
    {
     "name": "C",
     "children": [
      {"name": "D", "size": 7074}
     ]
    }
   ]
  },
  {
   "name": "C",
   "children": [
    {"name": "D", "size": 17010},
    {"name": "D", "size": 5842},
    {
     "name": "C",
     "children": [
      {"name": "D", "size": 1983},
      {"name": "D", "size": 2047},
      {"name": "D", "size": 1375},
      {"name": "D", "size": 8746},
      {"name": "D", "size": 2202},
      {"name": "D", "size": 1382},
      {"name": "D", "size": 1629},
      {"name": "D", "size": 1675},
      {"name": "D", "size": 2042}
     ]
    },
    {"name": "C", "size": 1041},
    {"name": "C", "size": 5176},
    {"name": "C", "size": 449},
    {"name": "C", "size": 5593},
    {"name": "C", "size": 5534},
    {"name": "C", "size": 9201},
    {"name": "C", "size": 19975},
    {"name": "C", "size": 1116},
    {"name": "C", "size": 6006}
   ]
  },
  {
   "name": "B",
   "children": [
    {
     "name": "C",
     "children": [
      {"name": "D", "size": 721},
      {"name": "D", "size": 4294},
      {"name": "D", "size": 9800},
      {"name": "D", "size": 1314},
      {"name": "D", "size": 2220}
     ]
    },
    {"name": "C", "size": 1759},
    {"name": "C", "size": 2165},
    {"name": "C", "size": 586},
    {"name": "C", "size": 3331},
    {"name": "C", "size": 772},
    {"name": "C", "size": 3322}
   ]
  },
  {
   "name": "B",
   "children": [
    {"name": "D", "size": 8833},
    {"name": "D", "size": 1732},
    {"name": "D", "size": 3623},
    {"name": "D", "size": 10066}
   ]
  },
  {
   "name": "A",
   "children": [
    {"name": "D", "size": 4116}
   ]
  },
  {
   "name": "B",
   "children": [
    {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
   ]
  },
  {
   "name": "query",
   "children": [
    {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681},
    {
     "name": "B",
     "children": [
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681},
    {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
   ]
  },
  {
   "name": "B",
   "children": [
    {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
   ]
  },
  {
   "name": "B",
   "children": [
    {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681},
    {
     "name": "B",
     "children": [
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681},
    {
     "name": "B",
     "children": [
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681},
    {
     "name": "B",
     "children": [
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
   ]
  },
  {
   "name": "B",
   "children": [
    {
     "name": "C",
     "children": [
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {
     "name": "B",
     "children": [
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {
     "name": "B",
     "children": [
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681},
      {
       "name": "B",
       "children": [
        {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
       ]
      },
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {
     "name": "B",
     "children": [
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {
     "name": "B",
     "children": [
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {
     "name": "B",
     "children": [
      {
       "name": "B",
       "children": [
        {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
       ]
      },
      {
       "name": "B",
       "children": [
        {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
       ]
      },
      {
       "name": "B",
       "children": [
        {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
       ]
      },
      {"name": "B", "size": 1286},
      {
       "name": "C",
       "children": [
        {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
       ]
      },
      {
       "name": "B",
       "children": [
        {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
       ]
      },
      {"name": "B", "size": 1082},
    {"name": "V", "size": 1336},
    {"name": "C", "size": 319},
    {"name": "C", "size": 10498},
    {"name": "C", "size": 2822},
    {"name": "C", "size": 9983},
    {"name": "C", "size": 2213},
    {"name": "C", "size": 1681}
     ]
    },
    {"name": "C", "size": 16540}
   ]
  }
 ]
}

Upvotes: 1

Views: 91

Answers (1)

D Malan
D Malan

Reputation: 11434

If you log the value of d in your .on("click", function, you will see that d is an object with two properties, source and target. Therefore if you want to access the datum of the "child" object of the link, you would access it with d.target. So to log the name of the child, change the function to:

.on("click", function(d){
    console.log('Clicked : ' + d.target.name);
});

Upvotes: 1

Related Questions