[英]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} `;
});
}
為了繪制帶有d屬性的線,SVG規范提供了該屬性。 請參閱https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d以獲取更多參考。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.