Question

我在项目中使用nvd3s lineWithFocusChart。我的客户希望能够通过使用开始和结束切换来调整画笔范围，但不希望通过拖动“移动画笔范围”的功能。我的第一次尝试是在检测到移动时使事件处理程序返回false：

chart.focus.dispatch.on( "brush.start", function( evt ) {
                if ( d3.event.mode === "move" ) {
                    console.log( "Aborting move operation" );
                    d3.event.sourceEvent.stopPropagation();
                    d3.event.sourceEvent.preventDefault();
                    return false;
                } else {
                    console.log( "Ok" );
                    return true;
                }
            });

这不起作用 - 虽然我可以清楚地区分移动和调整大小，但从事件处理程序返回仍然允许两个操作。我认为事件处理程序中的代码是在之后执行的。

我想避免更改库的原始来源，因为它是通过npm包含的，并且会破坏其他系统上任何更新机制和项目的新安装。

有什么建议吗？提前谢谢！

Answer 1

只需使用css即可轻松完成此任务：

/*Only permit resize */
/*Remove ability to drag/ double-click focus */
    .nv-brush>.background{
        display:none;
    } 
/*Remove ability to move focus */
    .nv-brush>.extent{
        display:none;
    }

如果你想删除调整大小并且只能移动焦点：

/*Only permit move */
/*Remove ability to drag/ double-click focus */
    .nv-brush>.background{
        display:none;
    }
/*Remove ability to resize focus*/
    g.resize{
        display:none;
    }

nvd3：停用画笔的移动？

1 个答案: