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

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

1 个答案: