修改SVG路径不透明度和它的标记 [英] Modifying SVG path opacity and it's marker

问题描述

我想对路径进行一些修改，使用D3以编程方式定义。我想做的更改很简单，修改路径的不透明度。我遇到的问题是路径本身会改变，结束标记不会改变，我不太确定如何做到这一点。

I'm trying to make some modifications to a path, defined using D3 programmatically. The change I want to make is quite simple, modifying the opacity of the path. The problem I've got is while the path itself will change, the end marker does not, and I'm not quite sure how to make it do so.

标记定义如下：

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

我用来更改路径的代码，不更新标记：

The code that I use to change the paths, which doesn't update the markers:

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

任何人都可以建议我修改标记端样式需要更改什么？

Can anyone suggest what I might need to change to modify the marker-end style too?

感谢

推荐答案

修改不透明度而不是笔触不透明度因此

Modifying the opacity instead of the stroke-opacity works.. so

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

成为

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

这篇关于修改SVG路径不透明度和它的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！