d3.js - Recalculate points in an SVG path when first or last point changes -

i have built graph d3.js based on this example of force-directed graph, rather having straight lines between nodes creating curved lines using svg path elements. data structure individual link includes source , target represent nodes link connected. link data structure contains line element contains array of points defining path. data structure link looks this:

{     id:4,             type:"link",      fixed:true,      source: {                 id:1,                  name: "a",                 type:"node",                  x:226,                  y:190,                  fixed:1,                  index:0,                  weight:1,              },      target: {                 id:2,                  name: "b",                 type:"node",                  x:910,                  y:85,                  fixed:1,                  index:1,                  weight:1,              },      line:[{x:387, y:69}, {x:541.5, y:179}, {x:696, y:179}] } 

now in on tick event handler have current x , y co-ordinates for nodes a , b means of references d.source.x, d.source.y , d.target.x, d.target.y. have initial position of node (first element of d.line) , of node b (last element of d.line). trying recalculate points in between first , last points based on changes made positions of nodes a , b.

here on tick event handler:

force.on("tick", function() { svg.selectall("g.node").attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });     svg.selectall("g.link .line").attr("d", function(d) {           var xoffset = 0, // want calculate               yoffset = 0; // want calculate          var line = [ ];          (var i=0; i<d.line.length; i++) {              if (i==0) {                   line[line.length] = { x : d.source.x, y: d.source.y }              }              else if (i==d.line.length-1) {                   line[line.length] =  { x : d.target.x, y: d.target.y }              }              else {                   line[line.length] = { x: d.line[i].x + xoffset, y: d.line[i].y + yoffset }              }          }          return self.linegenerator(line);      })  });     

not offsetting x , y co-ordinates points in middle of path results in these points staying static when nodes or b dragged. can explain how go calculating xoffset , yoffset path correctly move/rotate when nodes dragged? or if knows of better (read "easier"!) way of accomplishing d3.js please let me know.

update:

here line generator code in chart constructor:

this.linegenerator = d3.svg.line() .x(function(d) { return d.x; }) .y(function(d) { return d.y; }) .interpolate("cardinal");

let me explain problem images, make problem having clearer. not matter of lines being linear, lines curved line generator, when drag node, want curve drag well. points on line must update reflect change made position of node. in other words path must not distorted nodes being moved.

so, in pictures; given situation:

if drag node b down , left, want see this:

(note rotated image editting software, hence background rotated)

instead getting this:

note how 1 intermediary point in line has stayed static when node b moved, causing curve distort. trying avoid happening.

hopefully makes problem clearer.