The connecting line I am trying to draw should connect two entries in two different timelines created with d3. Each timeline is located in its own svg container and has five entries on load. However the number of entries in each timeline will change as the user works. This change is updated via .merge() using a transition. Since the x-position of each entry is calculated in the way you see below, this x-position will change as well.

x = d3.scaleLinear()
        .domain([0, (entries.length - 1)])
        .range(["10%", "80%"]);

A second movement that needs to be taken into account, is scrolling. Since each timeline sits in its own container they can be scrolled independently and the connecting line will need to move accordingly. This is why I think the line would need to be in a separate svg.

I created this fiddle to mimic the basic structure: https://jsfiddle.net/stLzqafx/3/