डायनामिक एरोहेड कलर

Question

मैं डायरेक्टेड एसाइक्लिक ग्राफ को आकर्षित करने के लिए डी 3 का उपयोग कर रहा हूं और मैं उस पथ पर किनारों (और तीरहेड) के रंग को बदलकर किसी चयनित नोड के पथ को हाइलाइट करने में सक्षम होना चाहता हूं। मैं किनारे रंग को बदलने में आसानी से सक्षम था, लेकिन मैं यह नहीं समझ सकता कि इसी तीरहेड के रंग को कैसे बदला जाए। most applicable source मुझे पता चला है कि यह संभव नहीं था, लेकिन यह लगभग दो साल पहले भी है, इसलिए मैं यह देखने के लिए देख रहा हूं कि चीजें बदली हैं या नहीं। कोड मैं लिंक, तीर, और अद्यतन लिंक रंग बनाने के लिए उपयोग कर रहा हूँ नीचे है:

graph.append("svg:defs").selectAll("marker") 
    .data(["end"]) 
    .enter().append("svg:marker")  
    .attr("id", String) 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", 20) 
    .attr("refY", 0) 
    .attr("markerWidth", 6) 
    .attr("markerHeight", 6) 
    .attr("orient", "auto") 
    .style("fill", "gray") 
    .append("svg:path") 
    .attr("d", "M0,-5L10,0L0,5"); 

. . . 

var link = graph.append("svg:g").selectAll("line") 
    .data(json.links) 
    .enter().append("svg:line") 
    .style("stroke", "gray") 
    .attr("class", "link") 
    .attr("marker-end", "url(#end)"); 

. . . 

function highlightPath(node) { 
    d3.selectAll("line") 
    .style("stroke", function(d) { 
     if (d.target.name == node) { 
     highlightPath(d.source.name); 
     return "lightcoral"; 
     } else { 
     return "gray"; 
     } 
    }); 
} 

किसी भी सलाह बहुत अच्छा होगा। धन्यवाद।

Answer 1

नहीं सबसे अच्छा समाधान है, लेकिन आप आकर्षित कर सकता है तीर इस

var arrowHeads = svg.selectAll("polygon.arrowHeads") //arrow heads are triangles 
    .data(links) 
    .enter().append("polygon") 
    .attr("id", function(d, i) {return "arrowHead0" + i}) 
    .attr("points", function(d, i) { 
     //function here that outputs the three points of a triangle 
    }) 
; 

एक तीर और उसके सिर की तरह एक ही सूचकांक (क्योंकि वे एक ही संलग्न डेटा है)।

तो, आप इस्तेमाल कर सकते हैं d3.select("#arrowHead0" + arrowIndex).attr("fill", "black");

Answer 2

एक समारोह बनाएं और उसमें एक वापसी मान देने के लिए और val गतिशील होना चाहिए:

function marker (color) { 
    var val; 
    graph.append("svg:defs").selectAll("marker") 
     .data([val]) 
     .enter().append("svg:marker")  
     .attr("id", String) 
     .attr("viewBox", "0 -5 10 10") 
     .attr("refX", 20) 
     .attr("refY", 0) 
     .attr("markerWidth", 6) 
     .attr("markerHeight", 6) 
     .attr("orient", "auto") 
     .style("fill", color) 
     .append("svg:path") 
     .attr("d", "M0,-5L10,0L0,5"); 
    return "url(#" +val+ ")"; 
} 

var link = graph.append("svg:g").selectAll("line") 
       .data(json.links) 
       .enter().append("svg:line") 
       .style("stroke", "gray") 
       .attr("class", "link") 
       .attr("marker-end", marker); //"url(#end)"