d3 liquid chart bugs - clipping path jarring

问题

I am trying to stabilize this d3js liquid rectangle shape code. I am testing it with different dimensions but the configuration isn't holding - like its always being displaced.

-- this variant has a switch between a rect/circle gauge http://jsfiddle.net/0ht35rpb/132/

this tweak has configured 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

// Jug 3 - clipping jump more obvious

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

回答1:

2 changes you need to make to stabilize this example (jsfiddle.net/0ht35rpb/156):

1) set the waveGroupXPosition equal to - config.width or - config.width/2

2) change your animateWave() function to transition the path's transform attribute from (0,0) to (config.width, 0). The function should look like this:

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);
}

you can view the updated version here: http://jsfiddle.net/xpb0hsey/

来源：https://stackoverflow.com/questions/46151792/d3-liquid-chart-bugs-clipping-path-jarring

标签

javascript

d3.js