Sửa đổi độ mờ đường dẫn SVG và nó là điểm đánh dấu

Question

Tôi đang cố thực hiện một số sửa đổi đối với đường dẫn, được xác định bằng D3 theo lập trình. Sự thay đổi tôi muốn thực hiện khá đơn giản, thay đổi độ mờ của đường dẫn. Vấn đề tôi có là trong khi con đường chính nó sẽ thay đổi, điểm đánh dấu kết thúc không, và tôi không hoàn toàn chắc chắn làm thế nào để làm cho nó làm như vậy.

Các marker được định nghĩa như vậy:

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

Đường dẫn:

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

Mã mà tôi sử dụng để thay đổi các đường dẫn, mà không cập nhật các dấu hiệu:

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

Có ai có thể đề xuất những gì tôi có thể cần thay đổi để sửa đổi kiểu điểm đánh dấu không?

Cảm ơn

Answer 1

Sửa đổi opacity thay vì đột quỵ-opacity làm việc .. vì vậy

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

trở thành

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

Answer 2

Bạn sẽ có thể làm tương tự cho các định nghĩa con đường đánh dấu:

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

Answer 3

Bạn có thể thiết lập xác định tên làm sẵn để đánh dấu mũi tên của bạn

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

Và cấu hình phong cách của mình vớ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; 
}