更改 d3 强制布局 link 样式以匹配 d3-tree 外观
Change d3 force layout link style to match d3-tree look
我正在尝试用 d3 绘制家谱。为此,我想使用通常的 node-link 图(如 this one):
但是使用 link 风格,就像通常在 d3 trees 中找到的那样,即具有水平(或垂直)末端的贝塞尔曲线:
是否可以相应地更改 link,而无需深入研究 d3-force 代码?
如果您只是想匹配 link 的样式,则无需深入研究 d3-force 代码,它只计算位置,与样式无关。
每个 link 都有源和目标的 x 和 y 值。如果您用路径替换 linking source and target in most force layout examples 中的行,则可以使用这些 x 和 y 值来设置几乎任何类型的 link 您想要的样式。
我在下面使用 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; }));
然后塑造代表 links 的路径:
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) {
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">
选项 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;
return ["M",x0,y0,"C",xcontrol,y0,xcontrol,y1,x1,y1].join(" ");
})
同样,我在这里只做了一个样式,这次是水平样式,但是添加检查以查看是否需要水平或垂直 link 应该相当简单:
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">
选项 3 - 使用自定义曲线生成器
我包含这个是因为我 一个关于自定义曲线的问题,它偶然使用了相同的样式。这样我们就可以定义每个 link 的路径:
var line = d3.line().curve(d3.someCurve))
和
link.attr("d", function(d) {
return line([[d.source.x,d.source.y],[d.target.x,d.target.y]]);
})
我也添加了几条线来构建上面的示例,曲线可以是垂直的也可以是水平的:
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">
此选项也适用于 canvas(如果我没记错的话,选项 1 也适用)。
我正在尝试用 d3 绘制家谱。为此,我想使用通常的 node-link 图(如 this one):
但是使用 link 风格,就像通常在 d3 trees 中找到的那样,即具有水平(或垂直)末端的贝塞尔曲线:
是否可以相应地更改 link,而无需深入研究 d3-force 代码?
如果您只是想匹配 link 的样式,则无需深入研究 d3-force 代码,它只计算位置,与样式无关。
每个 link 都有源和目标的 x 和 y 值。如果您用路径替换 linking source and target in most force layout examples 中的行,则可以使用这些 x 和 y 值来设置几乎任何类型的 link 您想要的样式。
我在下面使用 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; }));
然后塑造代表 links 的路径:
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) {
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">
选项 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;
return ["M",x0,y0,"C",xcontrol,y0,xcontrol,y1,x1,y1].join(" ");
})
同样,我在这里只做了一个样式,这次是水平样式,但是添加检查以查看是否需要水平或垂直 link 应该相当简单:
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">
选项 3 - 使用自定义曲线生成器
我包含这个是因为我
var line = d3.line().curve(d3.someCurve))
和
link.attr("d", function(d) {
return line([[d.source.x,d.source.y],[d.target.x,d.target.y]]);
})
我也添加了几条线来构建上面的示例,曲线可以是垂直的也可以是水平的:
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">
此选项也适用于 canvas(如果我没记错的话,选项 1 也适用)。