我试图根据从json文件导入的数据动态更改Force Directed Graph中箭头的颜色:
var edgeColor = d3.scale.category10();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width",2)
.style("marker-end", marker(function(d){return edgeColor(d.relType);}))
.style("stroke", function(d){return edgeColor(d.relType);});
function marker (color){
svg.append("defs").selectAll("marker")
.data(["subject", "relation", "object"])
.enter().append("marker")
.attr("id", function(d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 25)
.attr("refY", 0)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", d3.svg.symbol().type("triangle")(10,1))
.style("fill", color)
return "url(#object)";
}
问题是只有边缘的颜色发生变化而箭头不变(我的情况下是三角形)。
有什么想法吗?