D3 Javascript Schleife rendern nicht

Question

Ich habe ein kurzes Stück Javascript in D3 geschrieben, mit einem objected orientierten Ansatz (siehe Org Klasse). Ich möchte, dass die Kreise zwischen zufälligen (x, y) Positionen flüssig animiert werden, jedoch bleibt der Code, den ich geschrieben habe, hängen, ohne etwas zu rendern (weiße Seite, Kreisel). Wenn ich die while(true) ausschließe, rendern die Kreise schön, aber ich brauche sie zu animieren - bitte helfen!

Meine zweite Frage ist, macht es Sinn, D3 in dieser objektorientierten Weise zu verwenden? In einer OOP-Programmiersprache wie Java würde ich etwas wie orgs[x].width++ machen und eine Art von rendering-Funktion aufrufen, aber mit D3 halte ich diese Referenzen auf den Speicher, oder muss ich die Kreisdaten jedes Mal aktualisieren, wenn sie sich ändern (d. H. 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

A while(true) ohne break Schleife wird für immer (Endlosschleife), weil true immer wahr ist. Sie tun können:

while (true) { 
    this.update(); 
    break; 
} 

Um update Lauf nur einmal zu machen.

Beachten Sie außerdem, dass D3 eine Standarddauer von 250 ms festlegt, wenn Sie duration() des Übergangs nicht angeben. Von der API:

Wenn eine Dauer nicht angegeben ist, wird standardmäßig 250ms

So bricht jede Funktion den Präzedenzfall ein und es passiert nichts. Wenn Sie eine Wiederholung update wollen verwenden Sie einen anderen Ansatz, wie eine Rekursion oder setInterval, aber nicht diese while(true).

(in Bezug auf Ihre zweite Frage betrifft, so scheint es, „zu breit“ für S. O. und damit ich meine Meinung zu geben absehen werde, aber ich denke, es ist nicht ein gemeinsames Konzept unter Gemeinschaft D3)