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

Question

我想在点击事件中更新一些显示的文本。我读到了有关更新模式的内容，对此我有点理解。但是我不确定是否可以使用它，因为我没有找到相应的方法来对其进行更改。

这是我的图形现在的外观：如果单击圆弧，我想在右侧显示详细信息（就像左侧的图例一样）。问题是，如果我单击第二个弧，它将开始将其置于前一个弧的下方。

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

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


    var i = 0;

这在d3.json(...功能中。在on click函数中，我有以下代码：

    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]
                })
                }

这是def，不在更新模式中，因为我什至没有.data。我读到，总是添加新内容并不是最明智的选择。由于我是D3的新手，所以我不知道该如何进行。

我尝试在update函数之外编写这样的d3.json函数，然后在onclick函数中调用它：

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

    var TooltipUpdateFunction = function update(){
        console.log("calling update")
        var u = d3.select('arcdetails')
                    .selectAll('*')
                    .data(function(d){
                        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) + ")")
                                -attr('class', "detailsRow");

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

        u.enter()
            .append('detailsRow')
            .merge(u)
            ;

        u.exit().remove();
    }

和

    TooltipUpdateFunction();

在onclick功能中。但是（惊讶）它没有用。我真的不知道用select all应该叫什么。

有人可以向我解释如何将其更改为join exit update模式，或者还有其他方法吗？

我的代码很大（也许很混乱；），但是如果您需要或想查看其余代码：here is my git repo。 （我使用了firefox。另一个浏览器可能会破坏我的dataviz-是的）

Answer 1

在帮助下，我找到了无需更新模式即可解决问题的解决方案。

//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]
            })
            }

在点击功能内，然后在json数据功能内：

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

我猜可能会有一个更新模式更好的解决方案，但至少它能起作用：）