D3转换SVG标记

Question

我在SVG中绘制箭头,使用svg:line标记定义如下的元素:

    svg_.append("svg:defs")
        .append("svg:marker")
        .attr("id", "bluearrowhead")
        .attr("viewBox", "0 -5 10 10")
        .attr("refX", 0)
        .attr("refY", 0)
        .attr("markerWidth", 6)
        .attr("markerHeight", 6)
        .attr("orient", "auto")
        .append("svg:path")
        .attr("d", "M0,-5L10,0L0,5")
        .attr("fill", "deepskyblue");

我希望能够淡出我的箭.对于箭头轴,这适用:

    svg_.selectAll(".arrows")
        .transition()
        .duration(1000)
        .style("stroke-opacity", 0.0)
        .remove();

但是当轴褪色时,箭头会停留1000毫秒然后突然消失.我试着fill-opacity上线,并试图selectAll上.bluearrowhead,但无济于事.有没有办法过渡标记样式？

Answer 1

试试:

svg_.selectAll(".arrows")
    .transition()
    .duration(1000)
    .attr("opacity", 0.0)