La línea de conexión que intento dibujar debe conectar dos entradas en dos líneas de tiempo diferentes creadas con d3. Cada línea de tiempo se encuentra en su propio contenedor svg y tiene cinco entradas cargadas. Sin embargo, la cantidad de entradas en cada línea de tiempo cambiará a medida que el usuario trabaje. Este cambio se actualiza a través .merge() usando una transición. Dado que la posición x de cada entrada se calcula de la forma que se muestra a continuación, esta posición x también cambiará.

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

Un segundo movimiento que debe tenerse en cuenta es el desplazamiento. Dado que cada línea de tiempo se encuentra en su propio contenedor, se pueden desplazar de forma independiente y la línea de conexión deberá moverse en consecuencia. Es por eso que creo que la línea debería estar en un svg separado.

Creé este violín para imitar la estructura básica: https://jsfiddle.net/stLzqafx/3/