D3退出多列系列折線圖標籤

Question

我試圖創建多列折線圖（基於Mike Bostock示例），但在多個數據集之間轉換。我已經得到了進出的線路，但每條線路的標籤在它們應該消失之後仍然存在。 Screenshot at this link.

此外，線條以奇怪的方式過渡;幾乎就像他們只是延伸同一條線來創建一個新的(Second screenshot at this link)。

這裏是我的代碼的相關部分（其中我畫的線條和添加標籤）：

var line = d3.svg.line() 
 
     .interpolate("basis") 
 
     .x(function(d) { return x(d.Date); }) 
 
     .y(function(d) { return y(d.candidate); }); 
 

 
    var person = svg_multi.selectAll(".candidate") 
 
     .data(people); 
 

 
    var personGroups = person.enter() 
 
     .append("g") 
 
     .attr("class", "candidate"); 
 

 
    person 
 
     .enter().append("g") 
 
     .attr("class", "candidate"); 
 

 
    personGroups.append("path") 
 
     .attr("class", "line") 
 
     .attr("d", function(d) { return line(d.values); }) 
 
     .style("stroke", function(d) { return color(d.name); }); 
 

 
    var personUpdate = d3.transition(person); 
 

 
    personUpdate.select("path") 
 
     .transition() 
 
     .duration(1000) 
 
     .attr("d", function(d) { 
 
      return line(d.values); 
 
     }); 
 

 
    person 
 
     .append("text") 
 
     .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) 
 
     .attr("transform", function(d) { return "translate(" + x(d.value.Date) + "," + y(d.value.candidate) + ")"; }) 
 
     .attr("x", 3) 
 
     .attr("dy", ".35em") 
 
     .text(function(d) { return d.name; }); 
 

 
    person.selectAll("text").transition() 
 
     .attr("transform", function(d) { return "translate(" + x(d.value.Date) + "," + y(d.value.candidate) + ")"; }); 
 

 
    person.exit().remove();

Answer 1

你每次渲染時追加一個新的文本元素給每個人而不是刪除舊的。假設您發佈的代碼每次要用新數據繪製圖表時都會運行，因此您每次都會得到更多的文本元素，而不是更新現有的元素。您只需附加「輸入」選項。你在路徑元素上做了這個，所以你只需要讓文本更像路徑。我已經用示例更新了示例，以突出顯示我所更改的內容。

var line = d3.svg.line() 
 
    .interpolate("basis") 
 
    .x(function(d) { return x(d.Date); }) 
 
    .y(function(d) { return y(d.candidate); }); 
 

 
var person = svg_multi.selectAll(".candidate") 
 
    // I added a key function here to make sure you always update the same 
 
    // line for every person. This ensures that when you re draw with different 
 
    // data, the line for Trump doesn't become the line for Sanders, for example. 
 
    .data(people, function(d) { return d.name}); 
 

 
var personGroups = person.enter() 
 
    .append("g") 
 
    .attr("class", "candidate"); 
 

 
// This isn't needed. The path and text get appended to the group above, 
 
// so this one just sits empty and clutters the DOM 
 
// person 
 
// .enter().append("g") 
 
// .attr("class", "candidate"); 
 

 
personGroups.append("path") 
 
    .attr("class", "line") 
 
    // You do this down below, so no need to duplicate it here 
 
    // .attr("d", function(d) { return line(d.values); }) 
 
    .style("stroke", function(d) { return color(d.name); }); 
 
    
 
// Append the text element to only new groups in the enter selection 
 
personGroups.append("text") 
 
    // Set any static attributes here that don't update on data 
 
    .attr("x", 3) 
 
    .attr("dy", ".35em"); 
 

 
var personUpdate = d3.transition(person); 
 

 
personUpdate.select("path") 
 
    .transition() 
 
    .duration(1000) 
 
    .attr("d", function(d) { 
 
    return line(d.values); 
 
    }); 
 

 
person.select("text") 
 
    // You don't have to do this datum call because the text element will have 
 
    // the same data as its parent, but it does make it easier to get to the last 
 
    // value in the list, so you can do it if you want 
 
    .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) 
 
    .attr("transform", function(d) { return "translate(" + x(d.value.Date) + "," + y(d.value.candidate) + ")"; }) 
 
    .text(function(d) { return d.name; }); 
 

 
// Remove this. You don't need it anymore since you are updating the text above 
 
// person.selectAll("text").transition() 
 
// .attr("transform", function(d) { return "translate(" + x(d.value.Date) + "," + y(d.value.candidate) + ")"; }); 
 

 
person.exit().remove();

你的問題的關鍵真的只是在做personGroups.append('text')而非person.append('text')。剩下的只是我過度的指出了一些其他的方法來改善你的代碼，應該更容易理解和維護。