d3液体图表错误 - 剪报路径震动

Question

我试图稳定这个d3js液体矩形形状代码。我正在测试它有不同的尺寸，但配置没有保持 - 就像它总是被取代。

- 此变体在rect / circle gauge之间切换 http://jsfiddle.net/0ht35rpb/132/

此调整已相应地配置了剪切路径

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 - 剪辑开始跳跃

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

// Jug 3 - 剪辑跳跃更明显

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/