0

I'm trying to do something that (it seems to me!) should be simple, but my attempts are getting very convoluted, and I'm looking for d3 guidance.

Suppose I have a dragged group object (consisting of a rectangle and its text) that has been dropped someplace at the end of a drag. I want to "register" this group at specific coordinates. How do I do that?

I am adding my code to the dragended() function associated with d3.drag's on("end") event. 

function dragended(d) {
    var move = d3.select(this);
    var g = move._groups[0][0];  // same as this!
    var rect = g.children[0]
    rect.x = schedLeft;
    rect.y = schedTop;

    d3.select(this).classed("active", false);
}

I bind d3.select(this) to the variable move, and get an object like that shown in the attached figure (Chrome developer Local).

enter image description here

EDIT: move._groups[0][0] is silly; it's the same as this!

Using this I can get the group (with child rect and text nodes) that I want to move.

schedLeft is the x coordinate where I want the group dropped. The rect node has x and y attributes, but my rect.x = schedLeft doesn't change anything (watching in the debugger).

Is that even the right way to have a transition of the entire group (ie, including the attending text) to its new location?

rikb
  • 630
  • 5
  • 18
  • First: `d3.select(this)._groups[0][0];` is the same of just `this`. Second: what's `schedLef`? What do you want to do here exactly? – Gerardo Furtado Nov 22 '17 at 05:50
  • @GerardoFurtado, #1 yes, that's true. #2: `schedLeft` is the x coordinate of the place i want to drop the group. – rikb Nov 22 '17 at 17:38

1 Answers1

0

Thanks to hints I found on SO here (from 2013!) I got it working using this:

function dragended(d) {
    // register dragged move into hourSched
    var top = schedTop + (nsched++) * menuWOHgt;
    var transX = newDropX - d.x ;
    var transY = newDropY  - d.y;
    var tstr = `translate( ${transX}, ${transY} )`;
    d3.select(this).attr("transform", tstr)
                    .classed("active", false);
}
rikb
  • 630
  • 5
  • 18