livereload when chart components are updated

[mercicle]

HI,

I'm unable to detect a change in a d3 chart component and have the updated chart reload live. For example, if when I change the rect color of the BarChart, I wanted to see the color livereload. If in the build-systems example you were to add a BarChart:

import React from "react"
import BarChart from './BarChart'

const systems = ['Gulp1!','Grunt','Tsers']

export default class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello!</h1>
        <ul>{systems.map(s => <li>{s}</li>)}</ul>
        <BarChart data = {[5,10,1,3]} size = {[500,500]} />
      </div>
    )
  }
}

and then add this component:

import React, {Component} from 'react'
import * as d3 from 'd3';

const bar_color ="red"; //"#fe9922"
class BarChart extends React.Component{

	constructor(props){
		super(props)
		this.createBarChart = this.createBarChart.bind(this)
	}

	componentDidMount(){
		this.createBarChart()
	}

	createBarChart(){
		const node = this.node
		const dataMax = d3.max(this.props.data)
		const yScale = d3.scaleLinear()
						.domain([0,dataMax])
						.range([0, this.props.size[1]])
 
	   d3.select(node)
			.selectAll('rect')
			.data(this.props.data)
			.enter()
			.append('rect')
			.style('fill', bar_color)
			.attr('x', (d,i) => i*25)
			.attr('y', d => this.props.size[1] - yScale(d))
			.attr('height', d => yScale(d))
			.attr('width', 25)
			.attr("opacity",0)
			.transition().duration(1000).attr("opacity",1)

	}

	render(){
		return <svg ref = {node => this.node = node } width = {500} height = {500}></svg>
	}

}

export default BarChart

[milankinen]

Hi! Side effects made during the mounting do not get reloaded because react-proxy preserves class identity.