d3 ड्राइंग तीर सुझावों

Question

इस उदाहरण में:

http://jsfiddle.net/maxl/mNmYH/2/

अगर मैं हलकों विस्तार, पूर्व:

var radius = 30; // (is 6 in the jsFiddle) 
var circle = svg.append("svg:g").selectAll("circle") 
.data(force.nodes()) 
.enter().append("svg:circle") 
.attr("r", radius) 

सबसे अच्छा तरीका क्या ठीक से तीर इसलिए की ड्राइंग समायोजित करने के लिए है कि यह सर्कल के त्रिज्या को इंगित करता है?

धन्यवाद

Answer 1

आप "सबसे अच्छा तरीका ठीक से तीर की ड्राइंग समायोजित करने के लिए" के लिए कहा। मैं दावा नहीं कर सकता कि निम्नलिखित दृष्टिकोण "सर्वश्रेष्ठ" तरीका है, और मैं अन्य उत्तरों की प्रतीक्षा करता हूं, लेकिन इस मुद्दे से निपटने के लिए यहां एक तरीका है।

http://jsfiddle.net/Y9Qq3/2/

प्रासंगिक अपडेट नीचे नोट कर रहे हैं।

... 
var w = 960, 
    h = 500 
    markerWidth = 6, 
    markerHeight = 6, 
    cRadius = 30, // play with the cRadius value 
    refX = cRadius + (markerWidth * 2), 
    refY = -Math.sqrt(cRadius), 
    drSub = cRadius + refY; 

... 
svg.append("svg:defs").selectAll("marker") 
    .data(["suit", "licensing", "resolved"]) 
    .enter().append("svg:marker") 
    .attr("id", String) 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", refX) 
    .attr("refY", refY) 
    .attr("markerWidth", markerWidth) 
    .attr("markerHeight", markerHeight) 
    .attr("orient", "auto") 
    .append("svg:path") 
    .attr("d", "M0,-5L10,0L0,5");  

... 
function tick() { 
    path.attr("d", function (d) { 
     var dx = d.target.x - d.source.x, 
      dy = (d.target.y - d.source.y), 
      dr = Math.sqrt(dx * dx + dy * dy); 
     return "M" + d.source.x + "," + d.source.y + "A" + (dr - drSub) + "," + (dr - drSub) + " 0 0,1 " + d.target.x + "," + d.target.y; 
    }); 
...