javascript - Colour links of a d3 network graph according to a data variable -

i colour different links of network graph according value within data vector (where each element of vector corresponds particular link). have tried of form:

var data = [1,1,1,2];  var link = svg.selectall(".link") .data(force.links()) .enter() .append("line") .attr("class", "link") .attr("marker-end", "url(#end)") .on("mouseover", linkmouseover) .on("mouseout", linkmouseout); link.data(force.links()).enter().append(".link") .style("stroke", function(d,i){ return ( (data[i]==2) ?          "red" : "black" ) }); 

however, not seem work. if it's important have svg styling:

 .link { stroke: #ff0000; opacity: 0.6; stroke-width: 1.5px; } 

does know why isn't working? have plunker version here.

the way setting links looks quite odd. following line doesn't seem make sense:

link.data(force.links()).enter().append(".link") 

the statement directly preceding line inserts lines links handling enter selection. on suspicious line binding same data again links' selection. because did not specify key function access data compute join based on data's index will, because handled same data before, yield empty enter selection. therefore, method setting style("stroke",...) never execute callback. furthermore, call .append(".link") wrong, because .link not valid svg element appended using method.

you somehow seem have messed part of code by, maybe, copy&paste action. if rid of above mentioned line , delete directly preceding semicolon code work expected:

var link = svg.selectall(".link")   .data(force.links())     .enter()   .append("line")   .attr("class", "link")   .attr("marker-end", "url(#end)")   .on("mouseover", linkmouseover)   .on("mouseout", linkmouseout)   .style("stroke", function(d,i){     return ( (data[i]==2) ? "red" : "black" );   }); 

have @ updated code working example.