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

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

4

3 に答える 3

2

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

d3.selectAll("marker path")
  .transition()
  .style("stroke-opacity", 0.5);
于 2013-04-03T15:23:57.837 に答える
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;
}
于 2013-10-15T23:08:31.557 に答える