D3 Transitions on SVG markers

Question

I'm plotting arrows in an SVG, using svg:line elements with markers defined as follows:

    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");

I want to be able to fade out my arrows. For the arrow shafts, this works:

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

But whilst the shafts fade, the arrowheads stay for 1000ms then suddenly disappear. I've tried fill-opacity on the lines, and tried selectAll on .bluearrowhead but to no avail. Is there any way to transition the marker styles?

Answer 1

Try with:

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