Question

我有一个条形图，我通过点击相关表格的行来更新。除了标签，一切都工作得很好。以下是代码：

seconds

输入选择工作正常（每次我点击一个新行，新标签弹出）但旧的不会消失。我的数据集看起来像这样：

 var mytext = svg.selectAll(".text").data(filterdata,function(d) { return d.date; }) 
    mytext.enter().append("text")
    mytext.exit().remove()
    mytext
    .attr("class","label")
    .attr("x", (function(d) { return x(d.date)  }  ))
    .attr("y", function(d) { return y(d.articles) + 1; })
    .attr("dy", ".75em")
    .text(function(d) { return d.articles; })
    .style("text-anchor", "start")
    }

Answer 1

你可以移动退出指令：

mytext.exit().remove();

在您输入指示之前

mytext.enter().append("text")

像这样的东西

var mytext = svg.selectAll(".text").data(filterdata,function(d) { return d.date; })
    mytext.exit().remove();
    mytext.enter().append("text");
    mytext
    .attr("class","label")
    .attr("x", (function(d) { return x(d.date)  }  ))
    .attr("y", function(d) { return y(d.articles) + 1; })
    .attr("dy", ".75em")
    .text(function(d) { return d.articles; })
    .style("text-anchor", "start")
    }

Answer 2

好的，我找到了包含以下代码的解决方案

var mytext = svg.selectAll("text.label").data(filterdata,function(d) { return d.date; })
    mytext.exit().remove()
    mytext.enter().append("text")
    mytext
    .attr("class","label")
    .attr("x", (function(d) { return x(d.date)  }  ))
    .attr("y", function(d) { return y(d.articles) + 1; })
    .attr("dy", ".75em")
    .text(function(d) { return d.articles; })
    .style("text-anchor", "start")
    }

我更改了svg.selectAll("text")的{{1}}。我猜有些内容与svg.selectAll("text.label")和attr("class","label")有关。但如果有人可以解释我，我不完全理解:)谢谢

我的标签更新选择有什么问题

2 个答案: