Javascript D3：如何使用点击文本的更新模式？

我想更新单击事件中显示的一些文本。我读过关于更新模式的文章，我有点理解它。但是我不确定我是否可以使用它，因为我没有找到相应的方法来改变它

这就是我的图表现在的样子：如果你点击一个弧，我想在右边显示细节（就像左边的图例一样）。问题是，如果我点击第二个弧，它会开始把它放在前一个弧的下方。

我通过使用以下代码实现了这一点：

//工具提示详细信息
var tooltipDetails=svg.append（“g”）
.attr（“转换”，“转换（450，-500）”）
.attr（'class'，'details'）
var i=0；

这在

d3.json（…

函数中。在

点击

函数中，我有以下代码：

for（d.data中的变量键）{
//console.log（key+：“+d.data[key]）
i=i+1；
var tooltipRow=tooltipDetails.append（“g”）
.attr（“转换”、“转换（0）”+（i*30）+”）；
tooltipRow.append（“文本”）
.attr（“id”、“文本”）
.attr（“x”，-20）
.attr（“y”，15）
.attr（“文本锚定”、“开始”）
.style（“字体大小”，“15px”）
.文本（“”）
;
tooltipRow.select（“text”）.text（函数（）{
返回键+”：“+d.data[键]
})
}

这不是更新模式中的def，因为我甚至没有

.data

。我读到总是附加新内容不是最明智的做法。因为我对D3非常陌生，我不知道如何继续

我尝试在

d3.json

函数之外编写一个类似这样的

update

函数，然后在

onclick

函数中调用它：

//工具提示详细信息
var tooltipDetails=svg.append（“g”）
.attr（“转换”，“转换（450，-500）”）
.attr（'class'，'arcdetails'）
var TooltipUpdateFunction=函数更新（）{
日志（“调用更新”）
变量u=d3。选择（'arcdetails'）
.selectAll（“*”）
.数据（功能（d）{
for（d.data中的var键）{
//console.log（key+：“+d.data[key]）
i=i+1；
var tooltipRow=tooltipDetails.append（“g”）
.attr（“转换”、“转换（0）”+（i*30+）”）
-attr（“类”，“详细信息显示”）；
tooltipRow.append（“文本”）
.attr（“id”、“文本”）
.attr（“x”，-20）
.attr（“y”，15）
.attr（“文本锚定”、“开始”）
.style（“字体大小”，“15px”）
.文本（“”）
;
tooltipRow.select（“text”）.text（函数（）{
返回键+”：“+d.data[键]
})
}
});
u、 输入（）
.append（'detailsRow'）
.合并（u）
;
u、 退出（）.remove（）；
}

及

TooltipUpdateFunction（）；

在

onclick

函数中。但是（令人惊讶的是）它不起作用。我真的不知道使用

selectall

调用什么

有人能向我解释一下如何将其更改为

加入退出更新

模式，或者还有其他方法吗

---

我的代码相当大（可能很凌乱），但如果您需要或想查看其余的代码：。（我使用了firefox。另一个浏览器可能会把我的dataviz搞砸-耶）

在帮助下，我找到了一个解决方案，可以在不使用更新模式的情况下完成这项任务

//tooltipdetails
    d3.select("#details").selectAll("#text").remove();
    var i = 0;
    for (var key in d.data) {
        //console.log(key + ":" + d.data[key])

        i = i + 1;
        var tooltipRow = tooltipDetails.append("g")
            .attr("transform", "translate(0, " + (i * 30) + ")");

        tooltipRow.append("text")
            .attr("id", "text")
            .attr("x", -20)
            .attr("y", 15)
            .attr("text-anchor", "start")
            .style("font-size", "15px")
            .text("")
            ;

        tooltipRow.select("text").text(function(){
            return key + ":" + d.data[key]
            })
            }

在on click函数内部，然后在json数据函数外部：

//tooltipdetails
var tooltipDetails = svg.append("g")
                        .attr("transform", "translate(450,-500)") 
                        .attr('id', 'details')

我想更新模式可能有更好的解决方案，但至少它是有效的：）