D3.js动态更改“强制定向图”中箭头的颜色

时间:2015-05-26 12:51:23

标签: javascript d3.js svg

我试图根据从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)";
}

问题是只有边缘的颜色发生变化而箭头不变(我的情况下是三角形)。

有什么想法吗?

0 个答案:

没有答案