Question

在我的应用中，我想支持pan&zoom个操作，但也可以切换到brush操作。在pan&zoom操作期间，我可以点击节点并使用drag操作在图表中移动它。我也能够成功处理mouse个事件。

当我切换到brush操作时，似乎我不再drag个节点了。当我将光标移动到节点上时，即使我在该节点上定义了mouse个事件，也没有任何反应。从好的方面来说，我可以使用brush选择多个节点，然后我可以使用箭头键移动它们。

我的问题是，除了箭头键之外，我还希望能够使用鼠标移动所选节点（在brush模式下）。处理mouse事件也很不错。

我在http://jsfiddle.net/vrdqonf2/2/创建了一个小提琴来演示我的问题。

Answer 1

问题是你在包含强制有向图的svg之后附加了画笔的group元素。在这种情况下，鼠标事件的目标将始终是画笔，因为节点位于该元素下面。

test.brush = test.svg //Append the brush first
    .append("g")
    .datum( function() { return { selected: false, previouslySelected: false }; } )
    .attr( "class", "brush" );

test.container = test.svg  //Now append the svg for graph
    .append( "svg:svg" )
    .attr( "width", chartWidth)
    .attr( "height", chartHeight)
    .style( "outline", "1px solid red" )
    .append( "svg:g" )
    .attr( "transform", "translate(" + test.translate + ") scale(" + test.scale + ")" );

更新

更新toggleBrushing方法中的else部分也如下所示，因为你也在sgg中将画笔附加到toggleBrushing方法中。你必须在svg之前添加画笔。您可以详细了解insert方法here。这是更新的JSfiddle

-------------
-------------
else
{
    ---------------------
    ---------------------       
    test.brush = test.svg
        .insert("g","svg") //Use insert instead of append 
        .datum( function() { return { selected: false, previouslySelected: false }; } )
        .attr( "class", "brush" );

    ---------------------
    ---------------------
}

在力导向图中支持平移和缩放以及画笔操作

1 个答案: