D3:

Question

I am trying to stabilize this d3js fluid rectangle shape code. I test it with different sizes, but the configuration does not hold - as always its offset.

- this option has a switch between a rectangular or circular sensor http://jsfiddle.net/0ht35rpb/132/

this setting adjusts the clipping path accordingly

fillGroup.append("rect")
    .attr("x", config.width - 5 + config.margin)
    .attr("y", config.margin)
    .attr("width", config.width - 2 * config.margin)
    .attr("height", config.height - 2 * config.margin)

// Jug 0

http://jsfiddle.net/0ht35rpb/151/

// jug 1

http://jsfiddle.net/0ht35rpb/154

// Jug 2 - clipping starts to jump

http://jsfiddle.net/0ht35rpb/155

// Yaig 3 - clipping jump more obvious

http://jsfiddle.net/0ht35rpb/156

Answer 1

2 , (jsfiddle.net/0ht35rpb/156):

1) waveGroupXPosition - config.width - config.width/2

2) animateWave(), (0,0) (config.width, 0). :

function animateWave() {
    wave.attr('transform','translate(0,0)');
    wave.transition()
        .duration(config.waveAnimateTime)
        .ease(d3.easeLinear)
        .attr('transform',`translate(${config.width},0)`)
        .on('end', animateWave);
}

: http://jsfiddle.net/xpb0hsey/