d3强制定向树上的弯曲线 [英] Curved line on d3 force directed tree

问题描述

新增到d3，并尝试开发一个强制导向的树，我们可以插入varioss数据集。我设法得到了基本的想法和运行，但希望使链接弯曲，所以我可以处理多个链接。我看了 http://bl.ocks.org/1153292 ，我只是没有得到它。最近我得到的是它所有工作，没有可见的路径。这是我的直线代码，如果你有时间，我会感激一些帮助

感谢：

  //设置保存数据结构的svg并将其放在名为mapBox的div中
 var svg = d3.select（div＃mapBox.theMap） .append（svg）
 .attr（width，mapWidth）
 .attr（height，mapHeight）; 
 
 //设置数据结构并将数据绑定到它
 var force = d3.layout.force（）
 .nodes（data.nodes）
 .links（data.links）
 .size（[mapWidth，mapHeight]）
 .charge（-600）
 .linkDistance（60）
 .start 
 
 //绘制链接并设置它们的样式
 var link = svg.selectAll（link）
 .data（data.links）
 .enter （）.append（line）
 .attr（class，link）
 .style（stroke，#ccc）
 
创建节点和附加的g元素以附加其他东西到
 var node = svg.selectAll（。node）
 .data（data.nodes）
 .enter （g）
 .call（force.drag）; 
 
 //将cirdle添加到g元素并定义样式
 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宽度，3）
 .style（stroke，function（d）{if（d.type == 1）{return＃eda45e} if（d.type == 2）{return 819e9a} else {return＃c36256}}）//节点笔画颜色
 .on（mouseover，nodeMouseover）
 on（mouseout，nodeMouseout）
 .on mousedown，nodeMousedown）
 .call（force.drag）; 
 
 //将文本附加到g元素并定义样式
 node.append（text）
 .attr（class，nodetext）
 .attr（dx，16）
 .attr（dy，.35em）
 .attr（text-anchor，function（d）{if == 1）{returnmiddle;} else {returnstart;}}）
 .text（function（d）{return d.name}）
 
 force.on （y，function（）{
 link.attr（x1，function（d）{return d.source.x;}）
 .attr（y1 {return d.source.y;}）
 .attr（x2，function（d）{return d.target.x;}）
 .attr（y2，function {return d.target.y;}）; 
 
 node.attr（transform，function（d）{returntranslate（+ dx +，+ dy +）; }）; 
  

}）;

首先定义一个路径：

<$> p $ p> var path = vis.selectAll（path）
.data（force.links（））;

path.enter（）。insert（svg：path）
.attr（class，link）
.style ccc）;


然后定义曲线，如Bob Haslett所说，并在移动专利诉讼示例：

 路径.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）; 
 returnM+ d.source.x +，+ d.source.y +A+ dr + ，+ dr +0 0,1+ d.target.x +，+ d.target.y; 
}）; 
  

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

Thanks:

//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 + ")"; });

});

解决方案

This also worked for me.

First define a path:

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

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

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屋！