在 d3 中轉換后刪除 svg 元素

Question

我想顯示一條線並讓它在幾秒鍾后消失。 我通過先畫一條線，然后在過渡后畫一個白色（與背景相同）來實現這一點。 但是，這會產生一個問題，即這會在同時放置在該位置的任何其他 SVG 元素上創建一個 while 行。

有什么方法可以刪除我在過渡時間后放置的線嗎？

$svg_area
.append("line")
.attr("x1",$pair[0][0])
.attr("y1",$pair[0][1])
.attr("x2",$pair[1][0])
.attr("y2", $pair[1][1])
.attr("style","stroke:rgb(255,192,203);stroke-width:1")
.transition()
.duration(2000)
.attr("style","stroke:rgb(255,255,255)");

Answer 1

您不需要為此進行過渡

 var $svgArea = d3.select('svg') var myLine = $svgArea.append("line") .attr("x1", 0) .attr("y1", 150) .attr("x2", 300) .attr("y2", 150) .attr("style", "stroke:rgb(255,192,203);stroke-width:1") window.setTimeout(function() { myLine.remove() }, 2000)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <svg width=300 height=300> </svg>