d3 from one div to another

by chrisfrisina

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="parent">
    <div id="left">
        <svg id="leftSVG" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
    </div>
    <div id="right">
        <svg id="rightSVG" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
    </div>    
</div>

CSS

#left {
    float: left;
    width: 49%;
    max-height: 200px;
    background: gray;
}
#right {
    float: right;
    width: 49%;
    max-height: 200px;
    background: lightgray;
}

JavaScript

var drag = d3.behavior.drag();
  drag.on("drag", function(d,i) {
      console.log(d);
      d.x += d3.event.dx;
      d.y += d3.event.dy;
      //This will change the center coordinates by the delta
      d3.select(this).attr("x", d.x).attr("y", d.y);
      //This should change the upper left x and y values by the delta
      d3.select(this).attr("transform", function(d,i){
          return "translate(" + [ x,y ] + ")"
      })
  })

console.log(drag);
var left = d3.select('#leftSVG');
var lbeat = left 
    .append('g')
    .append('circle')
    .attr('r', '20')
    .attr('cx', '50')
    .attr('cy', '50')
    .attr('id', 'left')
    .attr('fill', 'orange')
    .attr('stroke', 'black')
    .attr('transform', 'translate(0,0)')

var right = d3.select('#rightSVG');
var rbeat = right 
    .append('g')
    .append('circle')
    .attr('r', '10')
    .attr('cx', '150')
    .attr('cy', '50')
    .attr('id', 'left')
    .attr('fill', 'red')
    .attr('stroke', 'black')
    .attr('transform', 'translate(0,0)')
    .call(drag)