最新到d3,并尝试开发一个力导向树,我们可以插入变量数据集.我已经设法得到基本的想法并且运行,但是想使链接变得弯曲,所以我可以处理多个链接.我看过
http://bl.ocks.org/1153292,我只是没有得到它.最近我得到的是所有的工作,没有路径可见.这是我的直线代码,如果你有时间,我会感谢一些帮助
谢谢：
//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 + ")"; });
});
解决方法
这也对我有用.
首先定义一个路径：
var path = vis.selectAll("path")
.data(force.links());
path.enter().insert("svg:path")
.attr("class","link")
.style("stroke","#ccc");
然后定义曲线,如Bob Haslett所说,在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;
});
