时间戳

首页 > 解决方案 > D3：如何使用点击文本的更新模式？

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

问题描述

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

这就是我的图表现在的样子：如果您单击弧线，我想在右侧显示详细信息（就像左侧的图例一样）。问题是，如果我单击第二个弧，它会开始将其放在前一个弧的下方。 当你一个接一个地点击两条弧线时的状态

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

    //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模式，或者还有其他方法吗？

我的代码非常大（而且可能很乱；）但是如果您需要或想要查看其余部分： 这是我的 git repo。（我使用了 firefox。另一个浏览器可能会搞砸我的 dataviz - 耶）

标签： javascriptd3.jsonclickdata-visualization

解决方案

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

//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-function 内部，然后在 json-data-function 外部：

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

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

推荐阅读