javascript - 无法对气泡产生拖动效果

Question

我也实现了同样的目标here ，但我无法在 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);

控制台中没有错误。

我在这里缺少什么？

jsFiddle

Answer 1

这部分会发出错误并停止您的代码运行:

d3.select(self.frameElement).style("高度", 直径 + "px");

您不能从不同的框架中创建一个框架，在本例中是来自 fiddle 的 jsfiddle 窗口。删除该行就可以了。

气泡图之所以有效，是因为它是这种情况下的最后一行，并且对代码的其余部分没有影响。