Modifying SVG path opacity and it's marker

Question

I'm trying to make some modifications to a path, defined using D3 programmatically. The change I want to make is quite simple, modifying the opacity of the path. The problem I've got is while the path itself will change, the end marker does not, and I'm not quite sure how to make it do so.

The marker is defined as so:

    // define arrow markers for graph links
    svg.append('svg:defs').append('svg:marker')
        .attr('id', 'end-arrow')
        .attr('viewBox', '0 -5 10 10')
        .attr('refX', 6)
        .attr('markerWidth', 3)
        .attr('markerHeight', 3)
        .attr('orient', 'auto')
        .append('svg:path')
            .attr('d', 'M0,-5L10,0L0,5')
            .attr('fill', '#CCCCCC');

The path:

        // Create the links between the nodes
    var links = svg.append("g")
                    .selectAll(".link")
                    .data(data.links)
                    .enter()
                    .append("path")
                        .attr("class", "link")
                        .attr("d", sankey.link())
                        .style('marker-end', "url(#end-arrow)")
                        .style("stroke-width", function (d) { return Math.max(1, d.dy); })
                        .sort(function (a, b) { return b.dy - a.dy; });

The code that I use to change the paths, which doesn't update the markers:

d3.selectAll("path.link")
      .filter(function (link) {
          // Find all the links that come to/from this node
          if (self.sourceLinksMatch(self, link, node)) {
              return true;
          }

          if (self.targetLinksMatch(self, link, node)) {
              return true;
          }

          return false;
      })
     .transition()
     .style("stroke-opacity", 0.5);

Can anyone suggest what I might need to change to modify the marker-end style too?

Answer 1

Modifying the opacity instead of the stroke-opacity works.. so

d3.selectAll("path.link")
  .transition()
  .style("stroke-opacity", 0.5);

becomes

d3.selectAll("path.link")
  .transition()
  .style("opacity", 0.5);

Answer 2

You should be able to do the same for the marker path definition:

d3.selectAll("marker path")
  .transition()
  .style("stroke-opacity", 0.5);