Zakrzywiona linia na drzewie skierowanym w kierunku d3

Question

Nowość w wersji d3 i próba opracowania drzewa skierowanego na siłę, do którego możemy podłączyć zestaw danych programu varioss. Udało mi się uruchomić podstawową koncepcję, ale chciałbym, aby linki były zakrzywione, więc mogę obsługiwać wiele linków. Spojrzałem na http://bl.ocks.org/1153292 i po prostu go nie dostaję. Najbliższy dostaję to wszystko działa bez widocznej ścieżki. To jest mój kod dla prostych, będę wdzięczny za pomoc, jeśli masz czas

podziękowań:

//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

To również zadziałało dla mnie.

najpierw zdefiniować ścieżkę:

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

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

następnie zdefiniować krzywą, jak mówi Bob Haslett i na przykład Mobile Patent Suits:

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, udało się.

zmiana

.enter().append("line") 

do

.enter().append("path") 

następnie zmienić

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

do

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

Mam nadzieję, że pomogę każdemu utknąć, ponieważ byłem