d3 drag behavior and circles

config.json

{"description":"drag behavior and circles","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":false,"vim":true,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.5997407087294723,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}

inlet.js

//also see http://tributary.io/inlet/3779740
//for similar example with rectangles
var svg = d3.select("svg");
var drag = d3.behavior.drag()
    .on("drag",function(){
    var dx = d3.event.dx;
    var dy = d3.event.dy;
    //console.log(dx,dy);
    var circle = svg.append("circle")
        .datum({x:tributary.sw/2,y:tributary.sh/2})
        .attr({
          r: 10,
          cx: function(d) { return d.x},
          cy: function(d) { return d.y},
          fill: "#E2BD27"
             })
        .transition()
        .duration(1000)
        .attr("r",0)
        .attrTween("cx",function(d){
          return function(t){
          d.x += dx;
            return d.x;
          }
        })
        .attrTween("cy",function(d){
          return function(t){
          d.y += dy;
            return d.y;
          }
        })
        
        })


var rect = svg.append("rect")
  .attr({
    width:"100%",
    height:"100%",
    fill:"#082642"
  });

rect.call(drag);