Changing the opacity of the SVG path and its marker

Question

I am trying to make some changes to a path defined using D3 programmatically. The change I want to make is pretty simple, changing the opacity of the path. I have a problem until the path itself changes, the end marker does not do this, and I'm not quite sure how to do this.

The marker is defined as follows:

// 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'); 

Way:

  // 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 I use to change paths that does not update tokens is:

 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 change the style of the marker end?

thanks

Answer 1

Modifies opacity instead of stroke opacity. therefore

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

becomes

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

Answer 2

You must do the same to determine the marker path:

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

Answer 3

You can specify preset names for arrow markers.

 // build the arrow. svg.append("svg:defs").selectAll("marker") .data(["HELPS","HELPED_BY","DAMAGES","REPELS","FAMILY", "KINGDOM"]) // Different link/path types can be defined here .enter().append("svg:marker") // This section adds in the arrows .attr("id", String) .attr("viewBox", "0 -5 10 10") .attr("refX", 15) .attr("refY", -1.5) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto") .append("svg:path") .attr("d", "M0,-5L10,0L0,5"); // add the links and the arrows var path = svg.append("svg:g").selectAll("path") .data(force.links()) .enter().append("svg:path") .attr("class", function(d) { return "link " + d.type; }) .attr("marker-end", function(d) { return "url(#" + d.type +")"; }); 

And customize their respective styles with CSS

 marker#HELPS{fill:green;} path.link.HELPS { stroke: green; } marker#HELPED_BY{fill:#73d216;} path.link.HELPED_BY { stroke: #73d216; } marker#DAMAGES{fill:red;} path.link.DAMAGES { stroke: red; }