D3過渡時退出多系列折線圖標簽

Question

我正在嘗試創建多系列折線圖（基於Mike Bostock示例），但是要在多個數據集之間進行轉換。 我已經獲得了要過渡的線，但是每條線的標簽在消失后仍會粘在上面。 此鏈接的屏幕截圖。

此外，線路正在以奇怪的方式過渡； 幾乎就像他們只是在延伸同一行以創建新行一樣（此鏈接的第二張屏幕截圖） 。

這是我的代碼的相關部分（在此處繪制線並添加標簽）：

  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

您每次渲染時都會向每個人添加一個新的text元素，而不是刪除舊的text元素。 假設您每次想用新數據繪制圖表時，都會運行您發布的代碼，因此，您每次都會得到更多文本元素，而不是更新現有文本元素。 您只需要在“輸入”選項上附加。 您在path元素上執行了此操作，因此只需要使文本更像path即可工作。 我用注釋更新了您的示例，以突出顯示我所做的更改。

 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') 。 剩下的就是我全力以赴，並指出其他一些改進代碼的方法，這些代碼應該使它更易於理解和維護。