SVG yolu opaklığının ve işaretinin değiştirilmesi

Question

D3 kullanarak programlı olarak tanımlanan bir yol üzerinde bazı değişiklikler yapmaya çalışıyorum. Yapmak istediğim değişiklik, yolun opaklığını değiştirerek oldukça basit. Sorun şu ki, yolun kendisi değişecekken, bitiş işareti yok ve bunu nasıl yapacağımı tam olarak emin değilim.

markör böylece aşağıdaki gibi tanımlanır:

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

yolu:

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

işaretçileri güncelleme değildir I yolları değiştirmek için kullanımı kod:

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

İşaretçi sonu stilini değiştirmek için neyi değiştirmem gerektiğini önerebilecek biri var mı?

Teşekkür

Answer 1

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

Answer 2

Sen işaretleyici yolu tanımı için aynı şeyi mümkün olmalıdır: .. bu yüzden

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

yerine inme-opaklık opaklığını işleri değiştirme

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

Answer 3

Sen ok belirteçler için

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

önceden ayarlanmış isimlerini tanımlamak ayarlamak Ve CSS ile kendi stillerini yapılandırabilirsiniz

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