D3.js बल लेआउट - एज लेबल प्लेसमेंट/रोटेशन

Question

मैं D3.js के साथ बहुत नया हूं, और मैं बल लेआउट के साथ खेल रहा हूं। मैंने कोशिश की चीजों में से एक लिंक पर लेबल रख रहा था। यह ऐसा करने का

एक तरह से svg:text जोड़कर और मैन्युअल translate & rotate है, जो सीधे लाइनों के साथ ठीक काम करता है की गणना के द्वारा है। लेकिन, यदि लिंक svg:path (उदा। आर्क) है, तो यह अपेक्षा के अनुसार काम नहीं करता है। इन मामलों में, svg:textPath समाधान का सुझाव दिया गया है।

this demo में, आप svg:textPath के माध्यम से लिंक जोड़ने के लिए एक सरल कार्यान्वयन देख सकते हैं। इसके साथ एकमात्र समस्या यह है कि, जब स्रोत लक्ष्य के दाईं ओर स्थित होता है, तो टेक्स्ट विपरीत दिशा में प्रस्तुत किया जाता है (हमारे दृष्टिकोण से, यह अभी भी पथ के परिप्रेक्ष्य से सही है)। मेरा सवाल है, इस से निपटने के लिए कैसे?

केवल "समाधान" मैं ऊपर वर्णित मामले में मैन्युअल रूप से स्रोत और लक्ष्य को स्वैप कर रहा हूं। Here, आप देख सकते हैं कि यह लगभग काम करता है।

राज्य में जब स्वैप होता है, आप भी चाप दूसरी तरफ, जो सही नहीं लगता है के लिए flipping देख सकते हैं। :(

Answer 1

@LarsKotthoff सही है कि textPath को पथ की दिशा का पालन करना है। इस मामले में, पथ की दिशा न केवल आर्क दिशा को परिभाषित करती है, बल्कि अंत में तीर मार्कर का अनुलग्नक - यह फ्लाई पर दिशानिर्देशों को स्वैप करना मुश्किल बनाता है, क्योंकि आपको मार्कर को भी स्थानांतरित करना पड़ता है।

सरल समाधान (हालांकि यदि आपके पास बड़ी संख्या में लिंक हैं तो सबसे अच्छा नहीं है) असली लिंक पथ "छाया" करना है एक अदृश्य पथ के साथ केवल पाठ के लिए उपयोग किया जाता है:

var link = svg.append("svg:g").selectAll("g.link") 
    .data(force.links()) 
    .enter().append('g') 
    .attr('class', 'link'); 

var linkPath = link.append("svg:path") 
    .attr("class", function(d) { return "link " + d.type; }) 
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; }); 

var textPath = link.append("svg:path") 
    .attr("id", function(d) { return d.source.index + "_" + d.target.index; }) 
    .attr("class", "textpath"); 

अब आपके पास एक अलग रास्ता है जिसे आप ठीक से कुशल बना सकते हैं। oticed, दो मुद्दे हैं - आपको पथ दिशा बदलनी है, और आपको आर्क दिशा बदलनी है। ऐसा लगता है कि आप sweep-flag मान (see docs) को स्वैप करके पथ कमांड स्ट्रिंग में ऐसा कर सकते हैं, इसलिए Arx,ry 0 0,1 के बजाय आपके पास Arx,ry 0 0,0 है।

function arcPath(leftHand, d) { 
    var start = leftHand ? d.source : d.target, 
     end = leftHand ? d.target : d.source, 
     dx = end.x - start.x, 
     dy = end.y - start.y, 
     dr = Math.sqrt(dx * dx + dy * dy), 
     sweep = leftHand ? 0 : 1; 
    return "M" + start.x + "," + start.y + "A" + dr + "," + dr + 
     " 0 0," + sweep + " " + end.x + "," + end.y; 
} 

तो फिर तुम लिंक पथ और अलग से पाठ पथ अद्यतन कर सकते हैं:: आप पथ तार बनाने के लिए एक समारोह होने से कुछ कोड दोहराव को कम कर सकते हैं

linkPath.attr("d", function(d) { 
    return arcPath(false, d); 
}); 

textPath.attr("d", function(d) { 
    return arcPath(d.source.x < d.target.x, d); 
}); 

काम कर कोड देखें: http://jsfiddle.net/nrabinowitz/VYaGg/2/