Question

what I need to do is insert nodes on a path (or just coordinates without path), that would respect the node position (e.g. node.x and node.y) and recalculate their distance dynamically based on their count.

I tried:

d3.scale.linear().domain([0,width]).range([height, 0]);

But it only calculates the svg element diagonal line. Is there a way how to achieve this? For better understanding what I am trying to do I enclose an image illustration. Even better would be to put the nodes on a not linear path, but I am not able to figure out how to do this.

Thanks

Lukas

Answer 1

I managed to achieve this behavior by decreasing the node distance by their count and dynamically compute the new one based on diagonal path legth. I add a path, which is hidden for the user like this:

var points = [
                [0, height],
                [width, 0]                                                            
                ];


            var pth = svg.append("path")
                .data([[points]])
                .attr("class","diag")
                .attr("d", d3.svg.line()
                .tension(1)
                // Catmull–Rom
                .interpolate("basis"));

Compute its length:

halfDiagLength = pth.node().getTotalLength()/2;

Then sipmly get the new distance.
Afterwards, set the x and y coordinates, using diagonal function:

var x = d3.scale.linear().domain([0,width]).range([height, 0]);    
n.x = Math.round(l.source.x)+linkLength;
n.y = x(n.x);

Hope it helps someone.

Lukas