Ändern der SVG-Pfad-Opazität und ihrer Markierung

Question

Ich versuche, einige Änderungen an einem Pfad vorzunehmen, der programmgesteuert mit D3 definiert wurde. Die Änderung, die ich vornehmen möchte, ist ziemlich einfach und ändert die Deckkraft des Pfades. Das Problem, das ich habe, ist, während sich der Pfad selbst ändert, der Endmarker nicht, und ich bin mir nicht sicher, wie ich das machen soll.

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

Der Pfad:

wird die Markierung als so definiert

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

Der Code, den ich die Pfade ändern verwenden, die nicht den Marker nicht aktualisiert:

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

Kann jemand vorschlagen, was ich ändern muss, um den Marker-Ende-Stil zu ändern?

Dank

Answer 1

Ändern der Opazität anstelle der Hub-Opazität arbeitet .. so

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

wird

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

Answer 2

Sie sollen das gleiche für die Marker Pfaddefinition der Lage zu tun:

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

Answer 3

Sie können Preset-Namen für die Pfeilmarkierungen gesetzt definieren

// 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 +")"; }); 

und konfigurieren ihre jeweiligen Stile mit 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; 
}