支持力向图中的平移缩放和画笔操作

Question

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

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

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

我在 http://jsfiddle.net/vrdqonf2/2/ 创建了一个 fiddle 来说明我的问题。

Answer 1

问题是您在包含力导向图的 svg 之后附加了 brush 的组元素。在这种情况下，鼠标事件的目标将始终是画笔，因为节点位于该元素下方。

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 部分，如下所示，因为您也在 toggleBrushing 方法中将画笔附加在 svg 之后。您必须在 svg 之前添加画笔。您可以参考更多关于 insert 方法 here. Here is the updated JSfiddle

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

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

支持力向图中的平移缩放和画笔操作

Support both pan&zoom and brush operations in force directed graphs

javascript

d3.js