动态箭头颜色 [英] Dynamic Arrowhead Color

问题描述

我使用D3绘制一个定向非循环图，我想通过改变边缘（和箭头）到该路径的颜色来突出显示所选节点的路径。我很容易能够改变边缘的颜色，但我不知道如何改变相应的箭头的颜色。我发现最适用的来源表示这是不可能的，但也是从大约两年前，所以我想看看是否有什么变化。我用来创建链接，箭头和更新链接颜色的代码如下：

I am using D3 to draw a Directed Acyclic Graph and I would like to be able to highlight the path to a selected node by changing the color of the edges (and arrowheads) to that path. I was easily able to change the edge color, but I cannot figure out how to change the color of the corresponding arrowheads. The most applicable source I have found suggests that this was no possible, but it is also from about two years ago, so I am looking to see if things have changed. The code I am using to create the links, arrowheads, and update link color is below:

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

任何建议都是很好的。谢谢。

Any advice would be great. Thank you.

推荐答案

创建一个函数并给它一个返回值， val 应该是动态的：

Create a function and give a return value to it and val should be dynamic:

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

这篇关于动态箭头颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！