Question

我正在尝试编写一个简单的d3js应用程序，该应用程序将显示来自对象文字数组的图形。该文字将定期更新（从后端）。但为了简单起见，我使用setInterval（）重写了它，它应该更新内容。

<!doctype html>
<html>
<head>
    <script src="d3.js" type="text/javascript"></script>
    <script src="underscore.js" type="text/javascript"></script>
</head>
<body>
<div id="graph">

</div>

<script type="text/javascript">
    var data=[
        { name: 'NONE', distribution: 5}
    ];
    var graphElement = d3.select("#graph");
    // set initial data
    graphElement.selectAll("p")
            .data(data, function(d){return d.name} )
            .enter()
            .append("p")
            .text(function(d){return d.name + d.distribution;});

    var redraw= function() {
        console.dir(data);
        graphElement.selectAll("p")
                .data(data, function(d){return d.name})
                .enter()
                .append("p")
                .text(function(d){return d.name + d.distribution;});
    };


    setInterval(function() {
        var advice = _.find(data, function(i){return i.name == 'ADVICE'});
        if (!advice){
            advice = {name: 'ADVICE', distribution: 0};
            data.push(advice);
        }
        advice.distribution = advice.distribution + 1;
        redraw();
    }, 3000);
</script>

</body>
</html>

页面最初会显示一个段落（如预期的那样）。然后setInterval（）启动，并插入值为1的'ADVICE'方法。再次，如预期的那样。但是当后续的setInterval（）启动时，'ADVICE'节点不会更新 - 即它保持为'ADVICE1'。

我错过了一些明显的东西吗？

感谢您的帮助！

此致

亚历

Answer 1

这里有几点需要注意：

1）未正确处理输入/更新选择;

2）你的advice.distribution没有从1改变。

UPDATE FIDDLE刷新了ADVICE字符串。

var ge = graphElement.selectAll("p")
    .data(data, function(d){return d.name});

ge.exit().remove();

ge.enter().append("p");

ge.text(function(d){return d.name + d.distribution;});

d3 - 更新数据不会导致刷新

1 个答案: