-1

I follow the tutorial from http://bl.ocks.org/mbostock/4062045 and questions Introducing Arrow(directed), in Force Directed Graph d3 , and could customize edges color by 

  var svg_edges = svg.append("svg:g").selectAll("path")
                        .data(force.links())
                        .enter()
                        .append("line")
                        .style("stroke",function(d,i){
                         return color(i); // customize edges colors
                        })

and then add arrow by the below code:

        svg.append("svg:defs").selectAll("marker")
        .data(['end'])      // Different link/path types can be defined here
      .enter().append("svg:marker")    // This section adds in the arrows
        .attr("id", function(d,i) { 
            return d; 
        })
        .attr("viewBox", "0 -5 10 10")
        .attr("refX", 15)
        .attr("refY", 0)
        .attr("markerWidth", 6)
        .attr("markerHeight", 6)
        .attr("orient", "auto")
      .append("svg:path")
        .attr("d", "M0,-5L10,0L0,5")
        .style("fill", "#ccc")  // how to customize each arrow color here

and then add below in edges

.attr("marker-end", "url(#end)");

I want know how to specify each arrow's color just like what we did on edges. http://bl.ocks.org/mbostock/1153292 show how to specify different types of edges and arrows, but I did not find ways to change both(arrow and edges) by coding.

Community
  • 1
  • 1
Dawei
  • 41
  • 5
  • change the `.fill` callback? – eko Nov 22 '16 at 12:31
  • can you show example code? – Dawei Nov 22 '16 at 12:57
  • You've already done it with `.style("stroke", function(d,i)..)` the function is the callback so rather than giving a static color `.style("fill", "#ccc")` change the `#ccc` with a function. – eko Nov 22 '16 at 12:59
  • If you are looking for a way to style instances of your markers individually, you are out of luck with SVG 1.1. Have a look at [*"Changing an SVG marker's color - CSS?"*](/q/16664584) for an explanation. You need to define a marker for every color you like and assign that specific marker to the path. – altocumulus Nov 22 '16 at 14:43

1 Answers1

1

add edges class, in my test, d["value] in {0, 1}

 svg_edges.attr("marker-end", function(d) { return "url(#arrow" + d["value"] + ")"; });

in arrow definition 

svg.append("svg:defs").selectAll("marker")
   .data(['0','1'])      //same as  d["value] in {0, 1}
   .enter().append("svg:marker")    // This section adds in the arrows
   .attr("id", function(d,i) { return "arrow" + d; })

in css style

#arrow0 {
    fill: #ccc;
} 
#arrow1 {
    fill: red;
}

Then, you got it.

Dawei
  • 41
  • 5