d3液体图表错误-剪切路径震撼 [英] d3 liquid chart bugs - clipping path jarring

问题描述

我正在尝试稳定此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

//水罐2-剪辑开始跳跃

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

//水罐3-剪切跳更明显

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

解决方案

为稳定该示例需要进行2项更改( http://jsfiddle.net/xpb0hsey/

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

解决方案

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/

这篇关于d3液体图表错误-剪切路径震撼的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！