D3.js 没有层次结构的边缘捆绑
D3.js Edge Bundling without Hierachy
Holten 在 D3 中的分层边缘捆绑算法依赖于分层数据。
示例:http://bl.ocks.org/mbostock/7607999
有没有一种方法可以为非分层数据实现一个类似的圆形边缘捆绑图?
示例:http://bl.ocks.org/sjengle/5432087(像这样,但有样条...)
如果您的数据确实是非分层的,您可以将示例的 drawCurves 函数更改为如下内容:
function drawCurves(links) {
d3.select("#plot").selectAll(".link")
.data(links)
.enter()
.append("path")
.attr("class", "link")
.attr("d", function(d){
var lineData = [
{
x: Math.round(d.target.x),
y: Math.round(d.target.y)
}, {
x: Math.round(d.target.x) - Math.round(d.target.x)/3,
y: Math.round(d.target.y) - Math.round(d.target.y)/3
},
{
x: Math.round(d.source.x) - Math.round(d.source.x)/3,
y: Math.round(d.source.y) - Math.round(d.source.y)/3
},{
x: Math.round(d.source.x),
y: Math.round(d.source.y)
}];
return `M${lineData[0].x},${lineData[0].y}C${lineData[1].x},${lineData[1].y},${lineData[2].x},${lineData[2].y},${lineData[3].x},${lineData[3].y} `;
});
}
用SVG规范提供的d属性画线。请参阅 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d 以获取更多参考。
Holten 在 D3 中的分层边缘捆绑算法依赖于分层数据。
示例:http://bl.ocks.org/mbostock/7607999
有没有一种方法可以为非分层数据实现一个类似的圆形边缘捆绑图?
示例:http://bl.ocks.org/sjengle/5432087(像这样,但有样条...)
如果您的数据确实是非分层的,您可以将示例的 drawCurves 函数更改为如下内容:
function drawCurves(links) {
d3.select("#plot").selectAll(".link")
.data(links)
.enter()
.append("path")
.attr("class", "link")
.attr("d", function(d){
var lineData = [
{
x: Math.round(d.target.x),
y: Math.round(d.target.y)
}, {
x: Math.round(d.target.x) - Math.round(d.target.x)/3,
y: Math.round(d.target.y) - Math.round(d.target.y)/3
},
{
x: Math.round(d.source.x) - Math.round(d.source.x)/3,
y: Math.round(d.source.y) - Math.round(d.source.y)/3
},{
x: Math.round(d.source.x),
y: Math.round(d.source.y)
}];
return `M${lineData[0].x},${lineData[0].y}C${lineData[1].x},${lineData[1].y},${lineData[2].x},${lineData[2].y},${lineData[3].x},${lineData[3].y} `;
});
}
用SVG规范提供的d属性画线。请参阅 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d 以获取更多参考。