d3 液体图表错误 - 剪切路径不和谐

Question

我正在尝试稳定这个 d3js 液体矩形形状代码。我正在用不同的尺寸对其进行测试，但配置并没有保持 - 就像它总是被移位一样。

-- 这个变体在矩形/圆形仪表之间有一个切换 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)

// 壶0

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

// 壶 1

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

// Jug 2 - 剪辑开始跳跃

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

// 壶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/