我最近创建了一个使用JSON填充它的D3图表。该图表由旁边有电影名称的节点组成。然后该图表具有将每个节点连接在一起的链接。但是我也有一个面板,我想显示节点信息。例如,如果我点击“蓝光”节点,面板将填充节点标题“蓝光”和所有蓝光格式的电影。这些都存储在JSON数组中。我该怎么做呢?关于我想要实现的内容的关键示例是http://jsfiddle.net/sXkjc/994/ ...除了我想通过单击节点而不是按钮填充面板信息,有人可以帮忙吗?
D3代码:
<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"]
}
]}
小组:
<div class="panel">
<h3>You have selected:</h3>
<p>Node Detail will go the p tags!</p>
</div>
答案 0 :(得分:0)
你必须做两件事: 1.附上&#39; id&#39;属性到您的每个节点。这个id应该是唯一的。你可以使用你的json中的id字段。 2.为您的节点编写点击处理程序,如下所示:
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 */
});
这将解决您的问题。