d3 力导向树上的曲线 [英] Curved line on d3 force directed tree

问题描述

刚接触 d3 并尝试开发一个力导向树，我们可以将 varioss 数据集插入其中.我已经设法让基本的想法启动并运行，但想让链接弯曲，这样我就可以处理多个链接.我查看了 http://bl.ocks.org/1153292，但我只是不明白.我得到的最接近的是所有工作都没有可见的路径.这是我的直线代码，如果您有时间，我将不胜感激

New to d3 and trying to develop a force directed tree into which we can plug varioss dataset. I've managed to get the basic idea up and running but would like to make the links curved so I can deal with multiple links. I've looked at http://bl.ocks.org/1153292 and I'm just not getting it. The nearest I get is it all working with no path visible. This is my code for straight lines, I'd appreciate some help if you've got the time

谢谢:

//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 在移动专利诉讼示例中所说:

Then define the curve, as Bob Haslett says and in the Mobile Patent Suits example:

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

这篇关于d3 力导向树上的曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！