更改d3强制布局链接样式以匹配d3树外观 [英] Change d3 force layout link style to match d3-tree look
问题描述
我正在尝试用d3绘制家谱.为此，我想使用通常的节点链接图(例如
但具有通常在
是否可以在不深入研究d3力代码的情况下相应地更改链接?
如果您只是想匹配链接的样式，则无需深入研究d3力代码，它仅计算位置，而与内容无关样式.
每个链接的源和目标都有x和y值.如果将大多数强制布局示例中链接源和目标的线替换为路径，则可以使用这些x和y值来设置所需样式的样式.
我在下面使用d3v4 +-您的示例使用d3v3.
选项1-使用内置链接
在d3v3中，您将使用 d3.svg.diagonal ，但现在有 d3.linkVertical()和 d3.linkHorizontal()实现同一件事.这样我们可以使用:
d3.linkVertical().x(function(d){return d.x;}).y(function(d){return d.y;})); 然后使用以下方式塑造表示链接的路径:
link.attr("d"，d3.linkVertical().x(function(d){return d.x;}).y(function(d){return d.y;})); 我仅在下面进行了垂直样式设置-但是您可以确定x坐标的差值是否大于y坐标，从而确定您应该应用水平样式还是垂直样式.
var svg = d3.select("svg");var nodes ="abcdefg" .split(").map(function(d){返回{name:d};})var links ="bcdef" .split(").map(function(d){返回{target:"a"，来源:d}})links.push({target:"d"，来源:"b"}，{target:"d"，来源:"g"})var模拟= d3.forceSimulation().force("link"，d3.forceLink().id(function(d){return d.name;})).force("charge"，d3.forceManyBody().strength(-1000)).force("center"，d3.forceCenter(250,150));var node = svg.append("g").selectAll("circle").data(节点).enter().append("circle").attr("r"，5)var link = svg.append("g").selectAll(路径").data(链接).enter().append("path")模拟.nodes(节点).on(勾号"，勾号).force(链接").links(链接);函数tickd(){link.attr("d"，d3.linkVertical().x(function(d){return d.x;}).y(function(d){return d.y;}));节点.attr("cx"，function(d){return d.x;}).attr("cy"，function(d){return d.y;});} path {笔触:黑色；笔划宽度:2px；填充:无；} < script src ="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js></script>< svg width ="500" height ="300"> 选项2-手动指定路径
我们可以替换用于连接节点和路径的线，我们可以手动提供路径的 d 属性，前提是该路径的基准包含目标和源的x，y.也许像这样:
path.attr("d"，function(d){var x0 = d.source.x;var y0 = d.source.y;var x1 = d.target.x;var y1 = d.target.y;var xcontrol = x1 * 0.5 + x0 * 0.5;返回["M"，x0，y0，"C"，xcontrol，y0，xcontrol，y1，x1，y1] .join(")；}) 同样，我在这里只做过一种样式，这次是水平的，但是添加一个检查以查看是否需要水平或垂直链接应该很简单:
var svg = d3.select("svg");var nodes ="abcdefg" .split(").map(function(d){返回{name:d};})var links ="bcdef" .split(").map(function(d){返回{target:"a"，来源:d}})links.push({target:"d"，来源:"b"}，{target:"d"，来源:"g"})var模拟= d3.forceSimulation().force("link"，d3.forceLink().id(function(d){return d.name;})).force("charge"，d3.forceManyBody().strength(-1000)).force("center"，d3.forceCenter(250,150));var node = svg.append("g").selectAll("circle").data(节点).enter().append("circle").attr("r"，5)var link = svg.append("g").selectAll(路径").data(链接).enter().append("path")模拟.nodes(节点).on("tick"，勾选).force(链接").links(链接);函数tickd(){link.attr("d"，function(d){var x0 = d.source.x;var y0 = d.source.y;var x1 = d.target.x;var y1 = d.target.y;var xcontrol = x1 * 0.5 + x0 * 0.5;return ["M"，x0，y0，"C"，xcontrol，y0，xcontrol，y1，x1，y1] .join(");})节点.attr("cx"，function(d){return d.x;}).attr("cy"，function(d){return d.y;});} path {笔触:黑色；笔划宽度:2px；填充:无；} < script src ="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js></script>< svg width ="500" height ="300"> 选项3-使用自定义曲线生成器
之所以包含此内容，是因为我最近才回答有关自定义曲线的问题，偶然地使用了相同的样式.这样，我们可以使用以下命令定义每个链接的路径:
var line = d3.line().curve(d3.someCurve)) 和
link.attr("d"，function(d){返回行([[d.source.x，d.source.y]，[d.target.x，d.target.y]]);}) 我也在上面的示例中添加了几条线，曲线可以是垂直的也可以是水平的:
var curve = function(context){var custom = d3.curveLinear(context);custom._context =上下文；custom.point = function(x，y){x = + x，y = + y;切换(this._point){情况0:this._point = 1;this._line?this._context.lineTo(x，y):this._context.moveTo(x，y);this.x0 = x;this.y0 = y;休息;情况1:this._point = 2;默认:如果(Math.abs(this.x0-x)> Math.abs(this.y0-y)){var x1 = this.x0 * 0.5 + x * 0.5;this._context.bezierCurveTo(x1，this.y0，x1，y，x，y);}别的 {var y1 = this.y0 * 0.5 + y * 0.5;this._context.bezierCurveTo(this.x0，y1，x，y1，x，y);}this.x0 = x;this.y0 = y;休息;}}返回自定义；}var svg = d3.select("svg");var line = d3.line().curve(曲线);var nodes ="abcdefg" .split(").map(function(d){返回{name:d};})var links ="bcdef" .split(").map(function(d){返回{target:"a"，来源:d}})links.push({target:"d"，来源:"b"}，{target:"d"，来源:"g"})var模拟= d3.forceSimulation().force("link"，d3.forceLink().id(function(d){return d.name;})).force("charge"，d3.forceManyBody().strength(-1000)).force("center"，d3.forceCenter(250,150));var node = svg.append("g").selectAll("circle").data(节点).enter().append("circle").attr("r"，5)var link = svg.append("g").selectAll(路径").data(链接).enter().append("path")模拟.nodes(节点).on(勾号"，勾号).force(链接").links(链接);函数tickd(){关联.attr("d"，function(d){返回行([[d.source.x，d.source.y]，[d.target.x，d.target.y]]);})节点.attr("cx"，function(d){return d.x;}).attr("cy"，function(d){return d.y;});} 路径{笔触:黑色；笔划宽度:2px；填充:无；} < script src ="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js></script>< svg width ="500" height ="300"> 此选项也适用于画布(如果我没记错的话，选项1也适用).
I am undertaking yet another attempt to draw a family tree with d3. For this, I would like to use the usual node-link graph (like this one):
But with a link style like that usually found in d3 trees, i.e. be the Bezier curves with horizontal (or vertical) ends:
Is it possible to change the links accordingly, without diving into the d3-force code?
If you are just looking to match the style of the links, no need to dive into the d3-force code, it only calculates position, not anything related to styling.
Each link has a x and y values for both the source and the target. If you replace the line that is found linking source and target in most force layout examples with a path, you can use these x and y values to pretty much style any type of link you want.
I'm using d3v4+ below - your examples use d3v3.
Option 1 - Use the Built In Links
In d3v3 you would use d3.svg.diagonal, but now there is d3.linkVertical() and d3.linkHorizontal() to achieve the same thing. With this we can use:
d3.linkVertical()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; }));
And then shape paths representing links with:
link.attr("d",d3.linkVertical()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; }));
I've only done a vertical styling below - but you could determine if the difference in the x coordinates is greater than the y coordinates to determine if you should apply horizontal or vertical styling.
var svg = d3.select("svg");
var nodes = "abcdefg".split("").map(function(d) {
return {name:d};
})
var links = "bcdef".split("").map(function(d) {
return {target:"a", source:d}
})
links.push({target:"d", source:"b"},{target:"d", source:"g"})
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.name; }))
.force("charge", d3.forceManyBody().strength(-1000))
.force("center", d3.forceCenter(250,150));
var node = svg.append("g")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 5)
var link = svg.append("g")
.selectAll("path")
.data(links)
.enter().append("path")
simulation
.nodes(nodes)
.on("tick", ticked)
.force("link")
.links(links);
function ticked() {
link.attr("d", d3.linkVertical()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; }));
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
path {
stroke: black;
stroke-width: 2px;
fill:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="300">
Option 2 - Manually Specify Path
We can substitute the line used to connect nodes with a path, we can supply the d attribute of the path manually given the datum of the path contains the x,y of the target and the source. Perhaps something like:
path.attr("d", function(d) {
var x0 = d.source.x;
var y0 = d.source.y;
var x1 = d.target.x;
var y1 = d.target.y;
var xcontrol = x1 * 0.5 + x0 * 0.5;
return ["M",x0,y0,"C",xcontrol,y0,xcontrol,y1,x1,y1].join(" ");
})
Again, I've only done only one styling here, this time horizontal, but adding a check to see if horizontal or vertical links are needed should be fairly straightforward:
var svg = d3.select("svg");
var nodes = "abcdefg".split("").map(function(d) {
return {name:d};
})
var links = "bcdef".split("").map(function(d) {
return {target:"a", source:d}
})
links.push({target:"d", source:"b"},{target:"d", source:"g"})
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.name; }))
.force("charge", d3.forceManyBody().strength(-1000))
.force("center", d3.forceCenter(250,150));
var node = svg.append("g")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 5)
var link = svg.append("g")
.selectAll("path")
.data(links)
.enter().append("path")
simulation
.nodes(nodes)
.on("tick", ticked)
.force("link")
.links(links);
function ticked() {
link.attr("d", function(d) {
var x0 = d.source.x;
var y0 = d.source.y;
var x1 = d.target.x;
var y1 = d.target.y;
var xcontrol = x1 * 0.5 + x0 * 0.5;
return ["M",x0,y0,"C",xcontrol,y0,xcontrol,y1,x1,y1].join(" ");
})
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
path {
stroke: black;
stroke-width: 2px;
fill:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="300">
Option 3 - Use a Custom Curve Generator
I include this because I just recently answered a question on custom curves, that by chance uses the same styling. This way we can define the path of each link with:
var line = d3.line().curve(d3.someCurve))
and
link.attr("d", function(d) {
return line([[d.source.x,d.source.y],[d.target.x,d.target.y]]);
})
I've added a couple lines to build on the example above too, the curves can be either vertical or horizontal:
var curve = function(context) {
var custom = d3.curveLinear(context);
custom._context = context;
custom.point = function(x,y) {
x = +x, y = +y;
switch (this._point) {
case 0: this._point = 1;
this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
this.x0 = x; this.y0 = y;
break;
case 1: this._point = 2;
default:
if (Math.abs(this.x0 - x) > Math.abs(this.y0 - y)) {
var x1 = this.x0 * 0.5 + x * 0.5;
this._context.bezierCurveTo(x1,this.y0,x1,y,x,y);
}
else {
var y1 = this.y0 * 0.5 + y * 0.5;
this._context.bezierCurveTo(this.x0,y1,x,y1,x,y);
}
this.x0 = x; this.y0 = y;
break;
}
}
return custom;
}
var svg = d3.select("svg");
var line = d3.line()
.curve(curve);
var nodes = "abcdefg".split("").map(function(d) {
return {name:d};
})
var links = "bcdef".split("").map(function(d) {
return {target:"a", source:d}
})
links.push({target:"d", source:"b"},{target:"d", source:"g"})
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.name; }))
.force("charge", d3.forceManyBody().strength(-1000))
.force("center", d3.forceCenter(250,150));
var node = svg.append("g")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 5)
var link = svg.append("g")
.selectAll("path")
.data(links)
.enter().append("path")
simulation
.nodes(nodes)
.on("tick", ticked)
.force("link")
.links(links);
function ticked() {
link.
attr("d", function(d) {
return line([[d.source.x,d.source.y],[d.target.x,d.target.y]]);
})
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
path {
stroke: black;
stroke-width: 2px;
fill:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="300">
This option will work with canvas as well (as will option 1 if I'm not mistaken).
这篇关于更改d3强制布局链接样式以匹配d3树外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
