Drag function not working for d3

Question

I have a drag behavior that looks like the following:

 var boxDrag = d3.behavior.drag()
    .origin(function (d) {
        return d;
    })
    .on("drag", drawBox);

function drawBox( /*d*/ ) {
    console.log("asdf");
}

It's only a temporary skeleton, and yet it seems to be pulling up some errors about undefined x's and such.

Errors

Here's the full code: http://jsfiddle.net/gamea12/5zsj853h/

Answer 1

In your fiddle, you have:

var boxDrag = d3.behavior.drag()
    .origin(function (d) {
        return d;
    })
    .on("drag", drawBox);

However, in this case, d is undefined, which is causing your error. Changing this to:

var boxDrag = d3.behavior.drag()
    .origin(function (d) {
        return this;
    })
    .on("drag", drawBox);

Should fix the problem for you.