Unable to get dragging effect on bubbles

Question

I had achieved the same thing here, but I am not able to reproduce it in this bubble chart.

JS:

var selection = d3.selectAll( '.selected');

var drag = d3.behavior.drag()
.on("drag", function( d, i) {

    if( selection[0].indexOf( this)==-1) {
        selection.classed( "selected", false);
        selection = d3.select( this);
        selection.classed( "selected", true);
    } 

    // move the bubble with cursor to give dragging effect
    selection.attr("transform", function( d, i) {
        d.x += d3.event.dx;
        d.y += d3.event.dy;
        return "translate(" + [ Math.min(diameter - 48, Math.max(45,d.x)) , Math.min(diameter - 48, Math.max(45,d.y)) ] + ")"
    });        

    // reappend dragged element as last 
    // so that its stays on top 
    this.parentNode.appendChild(this);
    d3.event.sourceEvent.stopPropagation();
});

node.call(drag);

No errors in the console.

What am I missing here?

jsFiddle

@terribleProgrammer My apologies. I have corrected the link. — Rahul Desai, Aug 22 '14 at 12:59

score 1 · Accepted Answer · answered Aug 22 '14 at 19:25

This part emits an error and stops your code from running:

d3.select(self.frameElement).style("height", diameter + "px");

You can't a frame from a different frame, in this case the jsfiddle window from your fiddle. Remove that line and it will work.

The bubble chart works because it's the last line in that case and has no effect on the rest of the code.

Unable to get dragging effect on bubbles

1 Answers1