import React from 'react';
import node from './diagram';
import rd3 from 'react-d3-library';
const RD3Component = rd3.Component;
module.exports = React.createClass({
  getInitialState: function() {
    return {d3: ''}
  },
  componentDidMount: function() {
    this.setState({d3: node});
  },
  render: function() {
    return (
      <div>
        <RD3Component data={this.state.d3} />
      </div>
    )
  }
});

	svg.append("rect")
	    .attr("width", width)
	    .attr("height", height)
	    .style("fill", "none")
	    .style("pointer-events", "all")
	    .call(d3.zoom()
	        .scaleExtent([1 / 2, 4])
	        .on("zoom", zoomed));
	function zoomed() {
		//reselect DOM elements if they are in an event listener
	  var body = d3.select('body');
	  var circle = body.selectAll('circle');
	  var transform = d3.event.transform;
	  circle.attr("transform", function(d) {
	    return "translate(" + transform.applyX(d[0]) + "," + transform.applyY(d[1]) + ")";
	  });
	}