показать данные каждого круга пузырьковой диаграммы в таблице 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) к узлу. Это будет работать как ваши мыши и линии мыши.

В функции clickFunction, контролировать содержание целевой DIV с помощью

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

или с JQuery

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