livereload when chart components are updated

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 / livereactload

livereload when chart components are updated #163