d3 - 數據更新時更改文本標籤

Question

使用d3，我創建了一個條形圖，顯示其上每個條的文本值。我通過按鈕上的點擊事件在兩個不同的數據集之間切換。數據集在mousedown上成功更改，即條形圖的大小會發生變化，但我無法更改條上的文本標籤。我的redrawText函數沒有做任何事情，並且再次調用我的drawText函數只是將數據重繪在前一個標籤的頂部（正如所期望的那樣）。我正在尋找一種方法來刪除舊標籤並重新繪製反映我的removeText函數中新數據的標籤。

這是我的drawText函數，它最初被稱爲創建標籤。 'datachoose'是選擇用於繪製正確數據集的變量的名稱。

function drawText(dataChoose) { 
    new_svg.selectAll("text.dataChoose") 
     .data(dataChoose) 
     .enter().append("text") 
     .text(function(d) { 
       return d; 
       }) 
    /* removed some transform code */ 
    .attr("fill", "white") 
    .attr("style", "font-size: 12; font-family: Garamond, sans-serif"); 
} 

這裏是我的鼠標按下事件處理程序，它是用來更新數據集，並重新繪製圖形的相關部分：

.on("mousedown", function() { 

     if (dataChoose == data) { 
      dataChoose = data2; 
     } 

     else { 
     dataChoose = data; 
     } 

     redraw(dataChoose); 
     redrawText(dataChoose); 
    }); 

，這裏是我的redrawText（）函數

function redrawText(dataChoose) { 

    var new_text = new_svg.selectAll("text.dataChoose") 
     .data(dataChoose); 

    new_text.transition() 
    .duration(1000) 
    .text(function(d) { 
     return d; 
     }) 

/* removed transform code */ 

    .attr("fill", "white") 
    .attr("style", "font-size: 16; font-family: Garamond, sans-serif"); 
} 

Answer 1

沒有一個完整的例子，很難確切地看到你在做什麼，但它看起來像是文本標籤是數據的一個屬性，你可能沒有正確地獲得標籤字段。

這裏是什麼，我認爲你描述爲你想要的行爲一個簡單的例子：（LINK）：http://tributary.io/inlet/9064381

var svg = d3.select('svg'); 

var data = [{"tag":"abc","val":123}] 
    data2 = [{"tag":"ijk","val":321}] 

var dataChoose = data; 

var myBarGraph = svg.selectAll('rect') 
    .data(dataChoose) 
    .enter() 
    .append('rect') 
    .attr({ 
     x: 160, 
     y: 135, 
     height: 20, 
     width: function(d) { return d.val; }, 
     fill: 'black' 
    }); 

var updateBarGraph = function() { 
    myBarGraph 
    .data(dataChoose) 
    .transition() 
    .duration(1000) 
    .attr('width', function(d) { return d.val; }) 
} 

var myText = svg.append('text') 
    .data(dataChoose) 
    .attr('x', 129) 
    .attr('y', 150) 
    .attr('fill', '#000') 
    .classed('dataChoose', true) 
    .text(function(d) { return d.tag }) 

svg.on("click", function() { 
     if (dataChoose == data) { 
      dataChoose = data2; 
     } else { 
     dataChoose = data; 
     } 
     redrawText(); 
     updateBarGraph(); 
    }); 

function redrawText() { 
    myText 
    .data(dataChoose) 
    .transition() 
    .duration(1000) 
    .style("opacity", 0) 
    .transition().duration(500) 
    .style("opacity", 1) 
    .text(function(d) { return d.tag }) 
} 

編輯：另一種可能性是，你的標籤化是行不通的，因爲你需要告訴d3如何爲文本進行轉換（請參閱更新的redrawText）。