Tengo un componente que hace reaccionar el gráfico D3. Y tengo un interruptor que muestra el gráfico 1 cuando está ENCENDIDO y muestra el gráfico 2 cuando está APAGADO.

Básicamente, había una representación condicional de reacción basada en un estado variable.

El problema es: graph1 aparece de manera diferente. Cuando el componente se carga por primera vez, se ve diferente. Cuando el interruptor está APAGADO (gráfico 2) y luego nuevamente ENCENDIDO (gráfico 1), ahora se ve diferente.

Código:

 handleChange = function() { if(this.state.nwtb) { // this.setState({data: swtb_data, nwtb: false}); this.setState({nwtb: false}); } else { // this.setState({data: nwtb_data, nwtb: true}); this.setState({nwtb: true}); } }; render() { return ( <div> <div> <Switch onChange={this.handleChange.bind(this)} checked={this.state.nwtb} /> </div> <div> {this.state.nwtb ? <Graph id="graph" config={this.config} data={this.data} onClickGraph={this.onClickGraph} onClickNode={this.onClickNode} onDoubleClickNode={this.onDoubleClickNode} onRightClickNode={this.onRightClickNode} onClickLink={this.onClickLink} onRightClickLink={this.onRightClickLink} onMouseOverNode={this.onMouseOverNode} onMouseOutNode={this.onMouseOutNode} onMouseOverLink={this.onMouseOverLink} onMouseOutLink={this.onMouseOutLink} onNodePositionChange={this.onNodePositionChange} onZoomChange={this.onZoomChange} /> : <Graph id="graph" config={this.config} data={this.nwtb_data} onClickGraph={this.onClickGraph} onClickNode={this.onClickNode} onDoubleClickNode={this.onDoubleClickNode} onRightClickNode={this.onRightClickNode} onClickLink={this.onClickLink} onRightClickLink={this.onRightClickLink} onMouseOverNode={this.onMouseOverNode} onMouseOutNode={this.onMouseOutNode} onMouseOverLink={this.onMouseOverLink} onMouseOutLink={this.onMouseOutLink} onNodePositionChange={this.onNodePositionChange} onZoomChange={this.onZoomChange} /> }