D3 Edge Bundling generates edge full length of svg

Question

I have been working on some plots that use as their foundation this beautiful snippet: non-hierarchical radial outlay with edge bundling , adding hover-overs and other decorations. I've noticed, however, that when the snippet is fed certain json files, it generates edges that span the full height (or width) of the svg to which the edges are appended. This fiddle replicates the problem in Chrome.

In this fiddle, the edge between Arthur and Blanche spans the full length of the svg, while I would expect the edge to simply link Arthur and Blanche. A friend suggested that the JSON could be different for this edge, but it's consistent with the rest of the JSON. (The Arthur-Blanche JSON is represented in the second hash table below):

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

Does anyone know why this edge is displayed across the full span of the SVG?

I imagine I could hack the path to remove edge segments that fall outside of the main circle's radius, but I'm eager to understand what's causing this strange behavior. I would be very grateful for any assistance others can offer on this question!

Answer 1

Had to delve deep into this to give you the solution here it is :)

Instead of the line function

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

Make the condition that the y never goes beyond the diameter

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; });

Working code here

Hope this helps!