在表d3.js中显示气泡图的每个圆的数据

Question

我制作了一个气泡图，运行良好。但我需要甚至基于我点击每个圆圈的功能，与该圆圈相关的数据将以表格形式显示在另一个分区中。

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

第一个div包含气泡图并且工作良好。tablediv用作生成的表的容器。

这是我的密码。

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; });

Answer 1

您可以在节点中添加.on（"单击"，单击函数）。这将像您的mouseover和mouseout行一样工作。

在clickFunction功能中，使用控制目标div的内容

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

或使用jQuery

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