0

バブル チャートを作成し、正常に動作しています。しかし、各円をクリックすると、その円に関連するデータが別の 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; });
4

1 に答える 1

0

ノードに .on("click", clickFunction) を追加できます。これは、マウスオーバーとマウスアウトの行のように機能します。

clickFunction 関数では、次を使用してターゲット div のコンテンツを制御します。

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

またはjQueryで

$("#targetDiv").html(targetText);
于 2013-02-20T11:43:44.297 に答える