如何使用D3處理數據？

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.將'id'屬性附加到每個節點。這個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 */ 
}); 

這將解決您的問題。