SVG 标记上的 D3 过渡答案

【问题标题】：D3 Transitions on SVG markersSVG 标记上的 D3 过渡
【发布时间】：2013-04-08 04:12:15
【问题描述】：

我在 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，在.bluearrowhead上试过selectAll，但无济于事。有什么方法可以转换标记样式吗？

【问题讨论】：

标签： javascript svg d3.js marker transitions

【解决方案1】：

尝试：

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

【讨论】：

完美，谢谢 - 不知道整个元素的 opacity 属性。