Question

下面的Plnkr链接具有我一直在尝试修改的D3液体填充计，到目前为止，它可以正常工作，我可以看到数字自动更新，但波高保持不变。回到原始代码，我可以看到它具有一个随机数生成器，该生成器正在通过“值”作为文本标签和波形高度，但是现在我已将其替换为jQuery / JSON，仅更新了文本标签。

注意：当更改JSON文件中的值时，它会导致Plnkr刷新页面，并且wave确实会更新，但是当我在本地运行它并提取新数据（通过PHP文件而不是JSON文件）时，文字改变了，但是波浪没有改变。

原始仪表：https://gist.github.com/tissera/3f0b647d4928d2960a53738ef683b0a6

Plnkr：http://embed.plnkr.co/OO0fWVlBcXvlpTlZ2FYp/

Answer 1

只是看了一眼；

如果您查看DOM中的svg，您会发现它每次都会添加一个新组。由于旧的组已经渲染，因此看不到填充动画。

只是稍微更新了间隔函数

setInterval(function() {
    $.get('dummydata.json', function(data) {
    //data = JSON.parse(data);
    data.forEach(function (d) {
        readycount = d.value;
        busycount = d.value2;
        agentcount = d.total;
        })
// clear the old content in svg container  *** Note just quick and dirty solution ***
d3.select("#fillgauge4").selectAll("*").remove();
console.log(readycount);
var config3 = liquidFillGaugeDefaultSettings();
                 config3.textVertPosition = 0.5
                 config3.waveAnimateTime = 1000;
config3.valueCountUp = true;
                 config3.displayPercent = false;
                 config3.waveCount = 1;
                 config3.valueCountUp = true;
var gauge4 = loadLiquidFillGauge("fillgauge4", readycount, config3);

    })
        },3000);

D3液位计波形未更新

1 个答案: