Question

我最近创建了一个使用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>

Answer 1

你必须做两件事： 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 */
});

这将解决您的问题。

如何使用D3处理数据？

1 个答案: