我正在使用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)"
