D3 kuvvet yönlendirmeli ağaç üzerindeki eğri çizgi

Question

Yeni d3 sürümünde ve varios veri kümesini takabileceğimiz, kuvvet yönelimli bir ağaç geliştirmeye çalışıyor. Temel fikri hazırlamayı ve koşmayı başardım ama bağlantıların kavisli olmasını istiyorum, böylece birden fazla bağlantıyla başa çıkabilirim. http://bl.ocks.org/1153292'a baktım ve bunu anlamıyorum. Elime en yakın olanı, görünür bir yol olmadan çalışmak. Bu seferinde var eğer biraz yardıma takdir ediyorum, düz çizgiler benim kodudur

Teşekkür:

//Sets up the svg that holds the data structure and puts it in the div called mapBox 
var svg = d3.select("div#mapBox.theMap").append("svg") 
.attr("width", mapWidth) 
.attr("height", mapHeight); 

//Sets up the data structure and binds the data to it  
var force = d3.layout.force() 
.nodes(data.nodes) 
.links(data.links) 
.size([mapWidth, mapHeight]) 
.charge(-600) 
.linkDistance(60) 
.start(); 

//Draws the links and set up their styles 
var link = svg.selectAll("link") 
.data(data.links) 
.enter().append("line") 
.attr("class", "link") 
.style("stroke", "#ccc") 

//Creates nodes and attached "g" element to append other things to 
var node = svg.selectAll(".node") 
.data(data.nodes) 
.enter().append("g") 
.call(force.drag); 

//Appends the cirdle to the "g" element and defines styles 
node.append("circle") 
.attr("r", function(d) { if (d.weight<1.1) {return 5} else {return d.weight*1.3+5 }}) 
.style("fill", "White") 
.style("stroke-width", 3) 
.style("stroke", function(d) { if (d.type==1) {return "#eda45e "} if(d.type==2) {return "#819e9a"}else {return "#c36256" }}) // Node stroke colors 
.on("mouseover", nodeMouseover) 
on("mouseout", nodeMouseout) 
.on("mousedown", nodeMousedown) 
.call(force.drag); 

//Appends text to the "g" element and defines styles 
node.append("text") 
.attr("class", "nodetext") 
.attr("dx", 16) 
.attr("dy", ".35em") 
.attr("text-anchor", function(d) { if (d.type==1) {return "middle";} else {return "start";} }) 
.text(function(d) { return d.name }) 

force.on("tick", function() { 
link.attr("x1", function(d) { return d.source.x; }) 
    .attr("y1", function(d) { return d.source.y; }) 
    .attr("x2", function(d) { return d.target.x; }) 
    .attr("y2", function(d) { return d.target.y; }); 

node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

});

Answer 1

Ben kimsenin bu kadar işe yaradığını umuyorum Bu da benim için çalıştı.

Önce bir yolunu tanımlayın: Bob Haslett söylediği gibi,

var path = vis.selectAll("path") 
    .data(force.links()); 

path.enter().insert("svg:path") 
    .attr("class", "link") 
    .style("stroke", "#ccc"); 

Sonra eğrisini tanımlamak ve Mobile Patent Suits örnekte:

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 + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; 
}); 

Answer 2

Der, çalıştım.

değişiklik

.enter().append("line") 

.enter().append("path") 

sonra değiştirmek

link.attr("x1", function(d) { return d.source.x; }) 
    .attr("y1", function(d) { return d.source.y; }) 
    .attr("x2", function(d) { return d.target.x; }) 
    .attr("y2", function(d) { return d.target.y; }); 

link.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 + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; 
}); 

için 0