Question

我正在尝试使用像classical example这样的圆圈实现时间序列转换效果。但是，看看jsFiddle，看看我无法实现转变效果。

相反，数据集的索引似乎有些问题。看起来索引与它们（应该是以前的）值一致！？

任何人都可以帮忙，请求？

这是jsFiddle中的js代码。

<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <svg width="800" height="500"></svg>
    <script type="text/javascript">
        var x = d3.scale.linear()
            .domain([0, 1])
            .range([0, 800]);
        var data = [];
        setInterval(function(){
            if (data.length < 3) {
                data.push({value:Math.random(), date:new Date()});
            }
            else {
                data.shift();
                data.push({value:Math.random(), date:new Date()});
            }
            draw();
        }, 1000);
        function draw() {
            var svg = d3.select('svg');
            var circles = svg.selectAll('circle')
                    .data(data, function(d, i) { return d.value; });
            circles.attr('fill', 'orange');
            circles.exit()
                    .attr('fill', 'black')
                    .transition()
                    .duration(500)
                    .remove();
            circles.enter()
                    .append('circle')
                    .attr('fill', 'red')
                    .attr('r', 40)
                    .attr('cx', function(d, i) {
                        console.log("i: " + i);
                        return i*100 + 50;
                    })
                    .attr('cy', 50)
                    .transition()
                    .duration(500)
                    .attr('fill', 'blue');
            circles.style('stroke', 'black');
        }
    </script>
</body>

Answer 1

它在你的例子中不起作用的原因是因为新值始终是enter()在索引2处而你没有.transition()这些圈子，你只需在退出和输入时进行转换，这意味着数据更改时不会发生任何事情（在这种情况下，索引会更新）。这是我认为你正在努力做的jsfiddle工作。我将您的.shift()和.push()更改为.pop()和.unshift()，以使圈子从左向右移动而不是向右移动离开是因为它看起来像你正在尝试的那样。我还减小了svg的宽度，因此在调用exit()时.remove()圈不再可见。

新JSFIDDLE：jsfiddle

这里是更新的js代码：

var data = [];

setInterval(function(){
    if (data.length < 3) {
        data.push(Math.random());
    }
    else {
        data.shift();
        data.push(Math.random());
    }
    draw();
}, 1000);

function draw() {
    var svg = d3.select('svg');
    var circles = svg.selectAll('circle')
            .data(data, function(d, i) { return d; });

    circles.attr('fill', 'orange');
    circles.style('stroke', 'black');

    circles.enter()
            .append('circle')
            .attr('fill', 'red')
            .style('stroke', 'black')
            .attr('r', 40)
            .attr('cy', 50)
            .attr('cx', function(d, i) { return (data.length)*100 + 50; })
        .transition()
            .duration(500)
            .attr('cx', function(d, i) { return i*100 + 50; });

    circles.exit()
            .attr('fill', 'black')
        .transition()
            .duration(500)
            .attr('cx', function(d, i) { return (i - 1)*100 + 50; })
            .remove();

    circles.transition()
            .duration(500)
            .attr('cx', function(d, i) { return i*100 + 50; });
}

Answer 2

所以我发现互联网上有一个免费的book，它显示了如何shifting effect。我怀疑，经典示例不再有效，因为本书的作者使用序数比例并记住数据集中的最大键值（请参阅lastKeyValue）以使两个操作都添加和删除。更新轴也有帮助......

您可以看到整个示例here on github。

我仍然想知道这是否是一种规范的方式来做到这一点...我理解为什么它在书中起作用但不明白为什么它不像我那样工作在我的例子中做到了。

<强>更新

感谢@wilbur我想我现在明白了。我感到困惑的是人们说d3有数据绑定 - 现在我知道d3没有数据绑定 - 它只给你差异，其余的由开发人员决定（这是React样式吗？）。

另一件事是有人应该说明如何定义输入和退出中的那些索引。而不是通过单词来描述它，我在控制台中创建了另一个fiddle并且说了一些关于它的东西。顺便说一句。同样的小提琴泄漏了记忆（至少在我的Chrome中）。

谢谢@wilbur。现在我感到快乐和愚蠢的同时:)我将探索泄漏。

d3.js动态时间序列，如移动效果

2 个答案: