How to handle data using D3?

Question

I've recently created a D3 chart that uses JSON to populate it. The chart is made up of nodes that have the movies name next to it. Then the chart has links which connect each node together. However I also have a panel which I want to display the nodes information. For example if I clicked on the 'blu-ray' node, the panel will populate the node title 'blu-ray' and all the movies that are of the blu-ray format. These are all stored in the JSON array. How would I go about doing this? Close example to what I'm trying to achive is on http://jsfiddle.net/sXkjc/994/ ... except I want to populate the panels information by clicking the node instead of the buttons, can someone please help?

D3 Code:

<script>

    //Setting the svg & the charts width etc
    var diameter = 560;


    var tree = d3.layout.tree()
        .size([360, diameter / 2 - 120])
        .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });


    var diagonal = d3.svg.diagonal.radial()
        .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });


    var svg = d3.select("body").append("svg")
        .attr("width", diameter)
        .attr("height", diameter - 5)
      .append("g")
        .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

    //connecting the JSON file
    d3.json("data.json", function(error, root) {
      var nodes = tree.nodes(root),
          links = tree.links(nodes);

      //creating the links
      var link = svg.selectAll(".link")
          .data(links)
        .enter().append("path")
          .attr("class", "link")
          .attr("d", diagonal);

      //creating the circles
      var node = svg.selectAll(".node")
          .data(nodes)
        .enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

      node.append("circle")
          .attr("r", 4.5);

      node.append("text")
          .attr("dy", ".31em")
          .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
          .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
          .text(function(d) { return d.name; });
    });

    d3.select(self.frameElement).style("height", diameter - 150 + "px");

    </script>

JSON:

{
  "name": "Movies",
  "children": [
    {
      "name": "Blu-Ray",

      "children": [
        {
          "name": "Transformers",
          "url": "www.my-media-website.com",
          "dependsOn": ["Content API", "Search API", "Account API", "Picture API", "Facebook", "Twitter"],
          "technos": ["PHP", "Silex", "Javascript", "NGINX", "Varnish"],
          "host": { "Amazon": ["fo-1", "fo-2"] }
        },
        {
          "name": "Saving Private Ryan",
          "dependsOn": ["Content API", "Search API", "Account API"]
        },
        {
          "name": "Star Trek Into Darkness",
          "dependsOn": ["Content API"]
        }

      ],
      "dependsOn": ["Transformers", "Saving Private Ryan", "Star Trek Into Darkness"]
    }
]}

Panel:

<div class="panel">
 <h3>You have selected:</h3>
 <p>Node Detail will go the p tags!</p>
</div>

Answer 1

You have to do two things: 1. Attach 'id' attribute to each of your node. This id should be unique. you can use id field from your json. 2. Write click handler for your nodes like following:

node.on('click', function(d) {
   var clickedId = d3.select(this).attr("id");
   /* your code to use clickedId to get the data of clicked node from your JSON */
});

This will solve your problem.