d3.js在頁面上已有文本時追加文本

Question

我試圖將一些文本追加到頁面上已有的文本上。我第一次這樣做，它是有效的。第二次嘗試時，我遇到了麻煩，直到找到它：http://knowledgestockpile.blogspot.com/2012/01/understanding-selectall-data-enter.html

一旦我添加了一個按鍵功能，它對所有條目都有效，但是對第一個條目有效。我如何獲得第一個顯示？

var dataset=[{"x":0, "y":2},{"x":1, "y":2},{"x":2, "y":2},{"x":3, "y":2}]; 
    vis.selectAll("text") 
    .data(dataset) 
    .enter() 
    .append("text") 
    .text(function(d,i) {return d.x;}) 
    .attr("text-anchor", "middle") 
    .attr("x", function(d, i) {return scaleX(d.x);}) 
    .attr("y", function(d) {return scaleY(-5) ;}) 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "11px") 
    .attr("fill", "black"); 

    vis.selectAll("text") 
    .data(dataset,function(d){return d;}) 
    .enter() 
    .append("text") 
    .text(function(d,i) {return d.x;}) 
    .attr("text-anchor", "middle") 
    .attr("x", function(d, i) {return scaleX(d.x);}) 
    .attr("y", function(d) {return scaleY(20) ;}) 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "11px") 
    .attr("fill", "black"); 

這裏是小提琴：http://jsfiddle.net/tvinci/hbASc/2/

Answer 1

通過選擇文本，然後調用data()，你告訴D3，以配合現有元素的新元素。當你這樣做時，其意圖通常是更新現有元素，而不是簡單地將它們全部添加爲新元素。

如果您想要做的是兩次添加文本，您可以在兩個選項中爲文本分配不同的類，以便.enter()選擇將包含這兩種情況下的所有元素。該代碼會是這樣的

vis.selectAll("text.one") 
    .data(dataset) 
    .enter() 
    .append("text") 
    .attr("class", "one") 
    ... 

vis.selectAll("text.two") 
    .data(dataset) 
    .enter() 
    .append("text") 
    .attr("class", "two") 
    ... 

如果您想更新現有的文本，在第二次調用鏈刪除.enter()。在這種情況下，也不需要傳遞關鍵功能。