我正在使用D3绘制有向非循环图,我希望能够通过将边(和箭头)的颜色更改为该路径来突出显示所选节点的路径.我很容易改变边缘颜色,但我无法弄清楚如何改变相应箭头的颜色.我发现的
most applicable source表明这是不可能的,但它也是从大约两年前开始的,所以我希望看看情况是否有所改变.我用来创建链接,箭头和更新链接颜色的代码如下：
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";
}
});
}
任何建议都会很棒.谢谢.
解决方法
创建一个函数并给它一个返回值,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",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)"
