D3.js Dynamically change the color of arrows in Force Directed Graph

Question

I'm trying to dynamically change the color of arrows in Force Directed Graph according to data imported from a json file:

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

the problem is that only color of edges changes but not the arrows heads (triangle in my case).

Any idea?