在 d3 中转换后删除 svg 元素

Question

I want to show a line and make it disappear after a few seconds. I am accomplishing this by drawing a line first and then drawing a white (same as background) after my transition. However, this is creating a problem that this creates a while line on any other SVG elements placed in that position in the meantime.

Is there some way to remove the line I placed after my transition time?

$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

You don't need a transition for this

 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>