Question

我一直在研究一些以这个美丽的片段为基础的情节：non-hierarchical radial outlay with edge bundling，添加悬停和其他装饰。然而，我注意到，当片段被送入某些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

希望这有帮助！

D3 Edge Bundling生成svg的边缘全长

1 个答案: