web-dev-qa-db-ja.com

SVGパスの不透明度とそのマーカーを変更する

プログラムで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);

マーカーエンドスタイルを変更するために何を変更する必要があるかを誰かが提案できますか？

svgd3.js
9
Ian

ストロークの代わりに不透明度を変更すると、不透明度が機能します。

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

になります

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

マーカーパス定義についても同じことができるはずです。

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

矢印マーカーのプリセット名を定義するように設定できます

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