javascript - 支持力定向图中的平移和缩放以及画笔操作

Question

在我的应用程序中，我希望支持平移和缩放操作，但也能够切换到画笔操作。在平移和缩放操作期间，我可以单击节点并使用拖动操作在图表中移动它。我还能够成功处理鼠标事件。

当我切换到画笔操作时，我似乎无法再拖动节点。当我将光标移到节点上时，即使我在该节点上定义了鼠标事件，也没有任何反应。好的一面是，我可以使用画笔选择多个节点，并且可以使用箭头键移动它们。

我的问题是，除了箭头键之外，我还希望能够使用鼠标移动选定的节点(在画笔模式下)。处理鼠标事件也很好。

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

Answer 1

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

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 。这是更新后的JSfiddle

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

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