vẽ d3 mũi tên lời khuyên

Question

Trong ví dụ này:

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

Nếu tôi mở rộng vòng tròn, ví dụ:

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) 

cách tốt nhất để điều chỉnh đúng bản vẽ mũi tên như vậy là gì nó trỏ đến bán kính của vòng tròn?

Cảm ơn

Answer 1

Bạn đã yêu cầu "cách tốt nhất để điều chỉnh bản vẽ mũi tên đúng cách". Tôi không thể khẳng định cách tiếp cận sau đây là cách "tốt nhất" và tôi mong chờ các câu trả lời khác, nhưng đây là một phương pháp để giải quyết vấn đề này.

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

Các cập nhật liên quan được ghi chú bên dưới.

... 
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; 
    }); 
...