修改SVG路徑不透明度和它的標記

Question

我想對編程的使用D3定義的路徑進行一些修改。我想做的改變非常簡單，修改路徑的不透明度。我得到的問題是路徑本身會改變，結束標記不會改變，我不確定如何讓它這樣做。

標記被定義爲這樣：

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

的路徑：

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

，我使用改變的路徑的代碼，其中不更新標記：

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

任何人都可以建議我可能需要改變以修改標記端樣式嗎？

感謝

Answer 1

修改不透明度，而不是中風不透明工作..所以

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

變成

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

Answer 2

你應該能夠做同樣的標記路徑定義：

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

Answer 3

您可以設置定義預設名稱爲您的箭頭標記

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

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