6

D3 を使用して有向非巡回グラフを描画しています。そのパスのエッジ (および矢印) の色を変更して、選択したノードへのパスを強調表示できるようにしたいと考えています。エッジの色は簡単に変更できましたが、対応する矢印の色を変更する方法がわかりません。私が見つけた最も適切な情報源は、これが不可能であることを示唆していますが、それは約 2 年前のものでもあるため、状況が変化したかどうかを確認しています. リンク、矢印を作成し、リンクの色を更新するために使用しているコードは次のとおりです。

graph.append("svg:defs").selectAll("marker")
     .data(["end"])
   .enter().append("svg:marker")    
     .attr("id", String)
     .attr("viewBox", "0 -5 10 10")
     .attr("refX", 20)
     .attr("refY", 0)
     .attr("markerWidth", 6)
     .attr("markerHeight", 6)
     .attr("orient", "auto")
     .style("fill", "gray")
   .append("svg:path")
     .attr("d", "M0,-5L10,0L0,5");

. . .

var link = graph.append("svg:g").selectAll("line")
     .data(json.links)
   .enter().append("svg:line")
     .style("stroke", "gray")
     .attr("class", "link")
     .attr("marker-end", "url(#end)");

. . .

function highlightPath(node) {
  d3.selectAll("line")
    .style("stroke", function(d) { 
      if (d.target.name == node) {
        highlightPath(d.source.name);
        return "lightcoral";
      } else {
        return "gray";
      }
    });
}

どんなアドバイスも素晴らしいでしょう。ありがとうございました。

4

2 に答える 2

9

関数を作成し、それに戻り値を与え、val動的にする必要があります。

function marker (color) {
    var val;
    graph.append("svg:defs").selectAll("marker")
         .data([val])
         .enter().append("svg:marker")    
         .attr("id", String)
         .attr("viewBox", "0 -5 10 10")
         .attr("refX", 20)
         .attr("refY", 0)
         .attr("markerWidth", 6)
         .attr("markerHeight", 6)
         .attr("orient", "auto")
         .style("fill", color)
         .append("svg:path")
         .attr("d", "M0,-5L10,0L0,5");
    return "url(#" +val+ ")";
}

var link = graph.append("svg:g").selectAll("line")
                .data(json.links)
                .enter().append("svg:line")
                .style("stroke", "gray")
                .attr("class", "link")
                .attr("marker-end", marker); //"url(#end)"
于 2014-01-03T21:06:25.257 に答える
2

最善の解決策ではありませんが、このように矢印を描くことができます

var arrowHeads = svg.selectAll("polygon.arrowHeads") //arrow heads are triangles
    .data(links)
  .enter().append("polygon")
    .attr("id", function(d, i) {return "arrowHead0" + i})
    .attr("points", function(d, i) {
        //function here that outputs the three points of a triangle
    })
;

矢印とその頭のインデックスは同じです (添付データが同じであるため)。

だから、あなたは使うことができますd3.select("#arrowHead0" + arrowIndex).attr("fill", "black");

于 2013-08-02T20:21:25.667 に答える