Javascript 在onclick事件后显示文本

我正在使用click events将数据记录到控制台，但我希望在一个单独的框（我已经创建）中显示这些数据。有人对此有什么建议吗？还是有一个像样的图书馆可以帮助我实现这一目标

干杯

 var circles = svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("r", 7)
    .attr("cx", function(d) { return xScale(d[1]); })
    .attr("cy", function(d) { return yScale(d[2]); })
    .on('click', function(d, i) {
        console.log("click", d[0]);
    })
    .attr("fill", function(d) {
        var result = null;

        if (data.indexOf(d) >= 0) {
            result = colours(d);
        } else {
            result = "white";
        }
        return result;               
    });

var textBox = svg.append("rect")
    .attr("x", 5)
    .attr("y", 385)
    .attr("height", 150)
    .attr("width", 509)
    .style("stroke", bordercolor)
    .style("fill", "none")
    .style("stroke-width", border);

在

“单击”

侦听器中，只需选择您的

框

，或使用您已有的选择：

circles.on("click", function(d) {
    selection.append("text")
    //etc...
})

这是一个简单的演示，单击圆圈：

var svg=d3.选择（“svg”）；
var circle=svg.append（“circle”）
.基准({
姓名：“富”
})
.attr（“cx”，100）
.attr（“cy”，100）
.attr（“r”，60）
.样式（“填充”、“青色”）；
var box=svg.append（“g”）
.attr（“转换”、“翻译（300,50）”）；
框。追加（“rect”）
.attr（“高度”，50）
.attr（“宽度”，100）
.style（“笔划”、“黑色”）
.style（“填充”、“无”）
.样式（“笔划宽度”、“2px”）；
在“点击”按钮上旋转，功能（d）{
框。追加（“文本”）
.attr（“x”，10）
.attr（“y”，20）
.文本（d.名称）
})

伙计，我离你太近了。。。感谢您的帮助-还有一件事，单击另一个数据点后将框中的文本重置为空的最佳做法是什么？

box.selectAll（“text”）.remove（）@FeelingLikeAJabroni，这取决于你。如果对于不同的元素有不同的文本，最好的方法是在事件处理程序外部设置选择，在处理程序中，将其设置为所需的值，然后设置为
”
或
null
，如
.text（null）
中所示，使其为空。不要删除和重新附加D3代码中的元素，这不是最佳做法。@GerardoFurtado感谢您对D3的帮助，我非常感谢。我还有一个D3问题要问你，最好在哪里问？这里还是一个新问题？总是在发布新问题时提问。评论部分仅用于澄清答案。此外，你不应该“问我”或专门问某人一个问题：任何人都可以回答这些问题。