Modifica dell'opacità del percorso SVG e del marker

Question

Sto cercando di apportare alcune modifiche a un percorso, definito utilizzando D3 a livello di programmazione. Il cambiamento che voglio fare è abbastanza semplice, modificando l'opacità del percorso. Il problema che ho è mentre il percorso stesso cambia, il marcatore finale non lo fa, e non sono abbastanza sicuro di come farlo.

Il marcatore è definito come modo:

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

Il percorso:

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

Il codice che uso per cambiare i percorsi che non aggiorna i marcatori:

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

Qualcuno può suggerire cosa potrei aver bisogno di cambiare per modificare anche lo stile di fine marcatore?

Grazie

Answer 1

Modifica l'opacità al posto della corsa-opacità funziona .. quindi

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

diventa

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

Answer 2

Si dovrebbe essere in grado di fare lo stesso per la definizione del percorso marcatore:

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

Answer 3

È possibile impostare definire i nomi preimpostati per i vostri indicatori di direzione

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

e configurare i loro rispettivi stili con i 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; 
}