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("height", diameter + "px");

你可以从一个不同的框架中取出一个框架，在这种情况下是你小提琴的jsfiddle窗口。删除该行，它将起作用。

气泡图有效，因为它是该情况下的最后一行，对其余代码没有影响。

无法对气泡进行拖动效果

1 个答案: