Why not `d` is defined in d3.behavior.drag ()

Question

I am trying to make a circle draggable.

var drag = d3.behavior.drag(); drag.on("drag", function(d,i) { console.log(d); dx += d3.event.dx; dy += d3.event.dy; //This will change the center coordinates by the delta d3.select(this).attr("x", dx).attr("y", dy); //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 ] + ")" }) }) 

Here is the fiddle

It gives errors for each movement on the right red circle, but why does it say that d is undefined on lines 3, 4 and 5?

Answer 1

Working fiddle: http://jsfiddle.net/6a6da/33/

Arguments d,i usually refer to related data, but you are not binding any data. In your case, it is enough to work only with the event.

 drag.on("drag", function() { d3.select(this).attr("cx", +d3.select(this).attr("cx") + d3.event.dx); d3.select(this).attr("cy", +d3.select(this).attr("cy") + d3.event.dy); })l 

Answer 2

Updated: http://jsfiddle.net/6a6da/32/

define d as var d = d3.event; .

Later, however, x and y are undefined here: return "translate(" + [ x,y ] + ")" . I'm not sure what you want to do there.