D3边缘捆绑生成svg的边缘全长

Question

我一直在制作一些情节，以这个美丽的 sn-p:non-hierarchical radial outlay with edge bundling 为基础，添加悬停和其他装饰。但是，我注意到，当向 sn-p 提供某些 json 文件时，它会生成跨越边缘附加到的 svg 的整个高度（或宽度）的边缘。这个fiddle 复制了 Chrome 中的问题。

在这个小提琴中，亚瑟和布兰奇之间的边跨越了 svg 的整个长度，而我希望边简单地连接亚瑟和布兰奇。一个朋友建议这个边缘的 JSON 可能不同，但它与 JSON 的其余部分是一致的。 （Arthur-Blanche JSON 在下面的第二个哈希表中表示）：

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

有谁知道为什么这条边会显示在 SVG 的整个跨度上？

我想我可以破解路径以删除位于主圆半径之外的边缘段​​，但我很想了解导致这种奇怪行为的原因。如果其他人可以就这个问题提供任何帮助，我将不胜感激！

Answer 1

必须深入研究这个问题才能为您提供解决方案：)

代替直线函数

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

希望这会有所帮助！