修改SVG路径的不透明度及其标记

Question

修改SVG路径的不透明度及其标记

12

我正在尝试对使用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);

有人能建议一下我需要改变什么来修改标记的末尾样式吗？

- Ian

3个回答

2

你应该能够为标记路径定义做同样的事情：

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

- Lars Kotthoff

我可以这样做 - 尽管我实际上不想再手动选择它们。我刚刚发现，如果我设置“不透明度”而不是“描边不透明度”，那么它也会正确地选择标记... - Ian

0

您可以为箭头标记设置预定义名称。

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

- widged

我在这个演示中了解到了这种方法：http://www.mcpher.com/Home/excelquirks/d3/anyforce/markers - widged

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ian · Accepted Answer

修改不透明度而不是描边不透明度可行.. 所以

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

变成

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