d3.js - 在表 d3.js 中显示气泡图每一圈的数据

Question

我制作了一个气泡图并且工作正常。但我需要甚至基于功能，在该功能中我单击每个圆圈，与该圆圈相关的数据将以表格形式显示在另一个 div 中。

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

第一个 div 包含气泡图并且工作正常。table 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; });

Answer 1

您可以将 .on("click", clickFunction) 添加到节点。这将像您的 mouseover 和 mouseout 线一样工作。

在 clickFunction 函数中，使用控制目标 div 的内容

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

或使用 jQuery

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