Question

我想显示一条线，并使其在几秒钟后消失。为此，我先画一条线，然后在过渡后再画白色（与背景相同）。但是，这产生了一个问题，即与此同时在放置在该位置的任何其他SVG元素上都创建了一条白线。

有什么方法可以删除过渡时间之后放置的行？

$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>

在d3中转换后删除svg元素

1 个答案: