D3边缘捆绑产生边缘全长SVG

我一直对一些情节，作为他们的基础这个美丽的程式码中使用的：non-hierarchical radial outlay with edge bundling，加入悬停旁白等装饰。然而，我注意到，当代码片段被提供给某些json文件时，它会生成跨越svg的全部高度（或宽度）的边缘，边缘被添加到该边缘。此fiddle在Chrome中复制了该问题。D3边缘捆绑产生边缘全长SVG

在这种小提琴，亚瑟和布兰奇之间的边缘跨越SVG的全长，而我希望的边缘只是链接亚瑟和布兰奇。一位朋友建议说JSON可能会因此而有所不同，但它与JSON的其余部分保持一致。（亚瑟 - 布兰奇JSON在第二哈希表如下所示）：

{ 
    source: 5, 
    target: 4, 
    value: 1 
}, 
{ 
    source: 5, 
    target: 6, 
    value: 5 
}, 
{ 
    source: 5, 
    target: 7, 
    value: 2 
},

有谁知道为什么这个边缘横跨SVG的满量程显示？

我想我可以破解路径删除落在主圆的半径之外的边缘部分，但我渴望了解是什么导致了这种奇怪的行为。我非常感谢他人在这个问题上提供的任何帮助！

来源

2015-12-08 duhaime

不得不深入钻研这个在这里给你解决它:)

取而代之的是直线职能

var line = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d) { return d.x; }) 
    .y(function(d) { return d.y; });

使上Y从没有超出直径的条件

var line = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d) {if(d.x<0 || d.x > diameter) {d.x=diameter} return d.x; }) 
    .y(function(d) {if(d.y<0 || d.y > diameter) {d.y=diameter} return d.y; });

工作代码here

希望日是有帮助的！

来源

2015-12-09 10:42:21 Cyril

谢谢@Cyril！不幸的是，其他JSON馈送到您更改的小提琴仍然产生问题：/这里是一个例子：http://jsfiddle.net/yo7a8t1d/10/我已经加载了多个JSON文件以相同的格式到https：//s3.amazonaws的.com/duhaime-莎士比亚/福尔杰性别/ + {FILENAME} +上传.json其中filename是指任何这些值：1H4 AYL H5 LR每TN WT 1H6腺苷H8 MM R2 TNK WIV 2H4蚂蚁火腿MND R3添2H6心病JC MV罗山雀3H6 CYM约翰福音的Mac SHR TMP AWW ERR LLL超视距TGV TRO – duhaime

更新我的回答上面和小提琴这应该打钉LOL :) – Cyril

为你做修复工作？ – Cyril

D3边缘捆绑产生边缘全长SVG

回答

相关问题