I have recently developed a D3 chart that utilizes JSON data for population. The chart consists of nodes with movie names displayed beside them, connected by links. Additionally, I've added a panel that should display information about the selected node when clicked. For example, clicking on the 'blu-ray' node would populate the panel with details about blu-ray movies stored in the JSON array. I'm looking for guidance on implementing this feature effectively. A similar visualization can be seen at http://jsfiddle.net/sXkjc/994/. However, I want to trigger the panel's update by clicking on the nodes instead of buttons. Can anyone assist me with this?
D3 Code:
<script>
// Setting up svg and chart dimensions
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 + ")");
// Loading JSON data
d3.json("data.json", function(error, root) {
var nodes = tree.nodes(root),
links = tree.links(nodes);
// Creating links
var link = svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal);
// Creating 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 Data:
{
"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"]
}
]}
Information Panel HTML:
<div class="panel">
<h3>You have selected:</h3>
<p>Node detail will appear here!</p>
</div>