Ist es möglich, Standard D3 mit React-Komponenten (und ein Spritzer Redux) zu verwenden?

Question

Dies ist eine offene Frage, aber ich frage mich, ob es möglich ist, Vanille/regelmäßige JS D3 mit React-Komponenten zu kombinieren. Ich habe ein paar React-meets-D3-Tutorials gelesen, aber D3 in React-Komponenten zu bauen, klickt aus irgendeinem Grund einfach nicht mit meinem Gehirn. Es gibt großartige Ressourcen zum Erlernen von Vanille D3, also frage ich mich, ob es möglich ist, D3-Charts in React-Komponenten zu injizieren, während ich immer noch die Daten in meinem Redux-Store ausnutze?

Answer 1

Das Problem mit D3 ist es, das DOM für normales Arbeiten zu ändern.

Hier ist eine gute article with workaround for this problem. Es ist eine etwas unordentliche Lösung, aber am Ende erhalten Sie Komponenten, die gut mit reagieren und Sie können nativen D3-Code in ihnen schreiben. Die Schlüsselidee ist:

React Handle Eingabe und Verlassen der Elemente, und D3 behandeln Aktualisierung der Attribute .

Als Beispiel betrachten wir diese (sehr einfach) Bereich Grafik, die ich in meinem Projekt bin mit:

const d3Visualization = { 

    enter(data) { 
    const width = this.props.width; 
    const height = this.props.height; 

    const x = d3.time.scale.utc().range([0, width]); 
    const y = d3.scale.linear().range([height, 0]); 

    const xAxis = d3.svg.axis()./* ... axis code */ 
    const yAxis = d3.svg.axis()./* ... axis code */ 

    const area = d3.svg.area() 
     .x(d => x(new Date(d.dateTime))) 
     .y0(height) 
     .y1(d => y(d.usage)); 

    x.domain(d3.extent(data, d => new Date(d.dateTime))); 
    y.domain([0, d3.max(data, d => d.usage)]); 

    this.d3Path 
     .datum(data) 
     .transition(100) 
     .attr("d", area); 

    this.d3XAxis 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    this.d3YAxis 
     .call(yAxis) 

    } 

}; 

class Area extends React.Component { 

    componentDidMount() { 

    this.d3Node = d3.select(ReactDOM.findDOMNode(this)); 
    this.d3Path = this.d3Node.select("path.area"); 
    this.d3XAxis = this.d3Node.select("g.x.axis"); 
    this.d3YAxis = this.d3Node.select("g.y.axis"); 

    } 

    componentDidUpdate() { 
    d3Visualization.enter.call(this, this.props.data) 
    } 

    render() { 
    return (
     <svg width={this.props.width} height={this.props.height}> 
     <g transform="translate(20,10)"> 
      <path className="area"/> 
      <g className="x axis"></g> 
      <g className="y axis"> 
      <text></text> 
      </g> 
     </g> 
     </svg> 
    ); 
    } 

} 

ich den Code so weit wie möglich vereinfacht haben nur kleine Demo nach links. Im obigen Artikel finden Sie eine Beschreibung der häufigsten Probleme und eine kompliziertere Demo-Komponente.