显示表中每个圆圈的气泡图圈数据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

回答

相关问题