顯示錶中每個圓圈的氣泡圖圈數據d3.js

我做了一個氣泡圖並且工作正常。但是我需要甚至是基於特徵的點擊每個圓圈的數據以及與那個圓圈相關的數據會顯示在表格形式在另一個div ..顯示錶中每個圓圈的氣泡圖圈數據d3.js

<div id="bubblechart"></div> 
<div id="table"></div>

第一個div包含氣泡圖和工作正常。表格div用作生成的表格的容器。

這是我的代碼。

var node = svg.selectAll(".node") 
        .data(bubble.nodes(classes(root)) 
        .filter(function(d) { return !d.children; })) 
        .enter().append("g") 
        .attr("class", "node") 
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
node.append("circle") 
        .attr("r", function(d) { return d.r; }) 
        .style("fill", function(d) { return color(d.packageName); }) 
        .on("mouseover", animateFirstStep) 
        .on("mouseout", animateSecondStep); 
node.append("text") 
        .attr("dy", ".3em") 
        .style("text-anchor", "middle") 
        .text(function(d) { return d.className; });

來源

2013-02-20 Saurabh Sinha

您可以向節點添加.on（「click」，clickFunction）。這將像你的mouseover和mouseout行一樣工作。

在clickFunction功能，控制使用

document.getElementById('targetDiv').innerHTML = targetText;

或使用jQuery的目標DIV的內容

$("#targetDiv").html(targetText);

來源

2013-02-20 11:43:44

我怎樣才能與這個圈子這是一個問題 – 2013-02-20 12:01:58

實際的數據目標文本是與圓圈鏈接的json數據。圓圈數表示數據中的各種元素。 – 2013-02-20 12:08:17

這取決於你的數據結構。您需要使用鍵或索引值將表中想要的內容鏈接到數據。例如：「$（」＃table「）。html（d.className）;」將把類名的表格 – 2013-02-20 12:10:14

顯示錶中每個圓圈的氣泡圖圈數據d3.js

回答

相關問題