d3 v4 + reagieren + ES6: Wie programmatisch Achse erstellen?

Question

Ich versuche in der aktuellen Version 4 meinen Kopf um d3 zu bekommen. Konkret: Ich versuche die x-Achse für ein einfaches Liniendiagramm in react und es6 zu erstellen.

Ich habe die Beispiele von Mike Bostock gesehen und wie er es tut:

svg.append("g") 
.attr("class", "axis axis--x") 
.attr("transform", "translate(0," + height + ")") 
.call(d3.axisBottom(x)); 

Aber das ist weder reagieren noch ES6.

Auf einer anderen Seite, die ich die folgende Variante gesehen haben:

renderAxis() { 
    var node = this.refs.axis; 
    var axis = d3.svg.axis().orient(this.props.orient).ticks(5).scale(this.props.scale); 
    d3.select(node).call(axis); 
} 

render() { 
    return <g className="axis" ref="axis" transform={this.props.translate}></g> 
} 

Dies ist reagieren und ES6 aber nicht 4.

in Version d3 Ich könnte versuchen, die Version 3-Code auf Version 4 von verabschieden d3 aber: Der d3.select stört mich extrem. Ich möchte keine DOM-Aufrufe machen, wenn ich react (oder eine andere Bibliothek innerhalb von, wie d3) verwende. React sollte verwendet werden, um in das DOM auf die effizienteste Weise zu rendern, nicht um DOM-Knoten zu erhalten.

Also, meine Frage ist: Was ist die Reaktion-Weg, um mir eine einfache X-Achse zu erstellen? Oder, wenn es noch keine solche Antwort gibt: Was ist der reaktive Weg, den zitierten Code von Mike Bostock zu übernehmen?

Answer 1

Wenn Sie React verwenden, dann geben Sie ziemlich viel Kontrolle darüber, wie das DOM wegen seiner internen Arbeitsweise funktioniert. React rendert Ihre Komponenten in eine virtuelle DOM-Struktur und ermittelt dann den Unterschied zwischen der DOM-Struktur auf der Seite, in die Sie die Root-Komponente eingefügt haben, und der vorherigen. Es wird den Unterschied zwischen den beiden Bäumen anwenden, so dass der Baum auf der Seite wie der virtuelle aussieht.

Das Mischen von d3 und React erfordert ein wenig Trick. Alle Elemente, für die Sie d3 verwenden (Knoten oder Attribute), sollten nicht React gehören. Sonst passiert komisches Zeug. Angenommen, Ihr transform-Attribut für den Knoten g.axis wird durch d3 festgelegt. Dies bedeutet, dass Sie es in React nicht rendern. Sie lassen Ihre d3-Logik das ausschließliche Eigentum daran haben.

Jetzt kommt der nächste Schritt. Wenn Sie andere Werkzeuge zum Beschreiben von DOM-Knoten verwenden möchten, müssen Sie diese Logik in componentWillMount and componentDidUpdate einfügen. Im Grunde rendern Sie nur das g Element innerhalb der render() Methode von React und dann innerhalb dieser beiden React Lifecycle-Handles können Sie die Attribute des g Elements ändern und was drin ist.

Ich werde Sie auf diese post that goes a bit more in detail about the hows hinweisen, aber ich möchte auch meine zwei Cent geben. Aus meiner Sicht und Erfahrung mit diesen beiden ist es am besten, nur d3 für seine Hilfsfunktionen (generische mathematische Funktionen) zu verwenden. Lassen Sie die Rendering-Logik (DOM-Komposition) rein in React geschehen, auch wenn Code-Duplikation entsteht. Es ist viel einfacher, Code konsistent zu halten, der nicht zwei verschiedene Ansätze zum Rendern von gemischten Inhalten aufweist.

TL; DR; Geben Sie Attribute oder Knoten entweder für React oder d3 an, damit sie zusammenarbeiten können. oder meine Empfehlung, erstellen Sie Ihre eigene Achsenkomponente in React, die dieselben DOM-Elemente wie das d3-Element (oder anders, wenn Sie eine andere Funktionalität oder einen anderen Stil wünschen) und kein d3 zum Rendern verwendet.

Ich hoffe, ich half.