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