Question

我在D3中编写了一个快速的Javascript，使用了面向对象的方法（参见Org类）。我希望让圈子在随机（x，y）位置之间平滑地生成动画，但是我写的代码会被卡住而不会渲染任何东西（白页，旋转器）。如果我排除了while(true)，圈子会很漂亮，但我需要它们来制作动画 - 请帮助！

我的第二个问题是以这种面向对象的方式使用D3是否有意义？在像Java这样的类OOP语言中，我会做orgs[x].width++之类的事情并调用某种重新呈现函数，但是使用D3执行对内存保持的引用，或者每次更改时都必须更新圆形数据（即circles.data(orgs)）？

class Org {
    constructor(_width, _height) {
        this.width = _width;
        this.height = _height;
    }
}

var canvas = d3.select('body')
        .append('svg')
        .attr('width', screen.width)
        .attr('height', screen.height);

var orgs = d3.range(100).map(function() {
    return new Org(Math.random() * screen.width, Math.random() * screen.height);
});

var circles = canvas.selectAll("circle")
        .data(orgs)
        .enter().append('circle')
        .attr('cx', d => d.width )
        .attr('cy', d => d.height )
        .attr('r', 5)
        .attr('fill', 'rgb(255, 0, 213)');

while (true) { //Sticks without rendering
    this.update();
}

function update() {
    circles.transition()
        .attr('cx', function() { return Math.random() * screen.width; })
        .attr('cy', function() { return Math.random() * screen.height; });
}

Answer 1

没有while(true)的{{1}}将永远循环（无限循环），因为break始终为真。你可以这样做：

true

让while (true) { this.update(); break; }只运行一次。

除此之外，请记住，如果您没有指定转换的update，则D3设置默认持续时间为250毫秒。来自API：

如果未指定持续时间，则默认为250毫秒

因此，每个函数都取消先前的函数，没有任何反应。如果您希望重复duration()使用不同的方法，例如递归或update，而不是setInterval。

（关于你的第二个问题，似乎＆＃34;太宽泛＆＃34;对于SO而言，因此，我不会发表我的意见，但我认为这不是一个常见的方法D3社区）

D3 Javascript循环无法呈现

1 个答案: