我不希望d3.behavior.zoom在我的图表上添加双击缩放的功能。如何禁用此行为?
这是一个带有不需要的行为的JSFiddle 。
我已经尝试了以下没有任何运气。
d3.behavior.zoom.dblclick = function() {};
我不希望d3.behavior.zoom在我的图表上添加双击缩放的功能。如何禁用此行为?
这是一个带有不需要的行为的JSFiddle 。
我已经尝试了以下没有任何运气。
d3.behavior.zoom.dblclick = function() {};
您可以通过删除缩放行为的 dblclick 事件侦听器来禁用双击行为。查看您的代码,您已将缩放行为分配给 SVG 元素。所以你可以说:
d3.select("svg").on("dblclick.zoom", null);
或者,连同您注册缩放行为的位置:
.call(d3.behavior.zoom().on("zoom", update)).on("dblclick.zoom", null)
您可能还希望将缩放行为向下移动到G 元素,而不是将其放在根 SVG 元素上;我不确定它能否在根 SVG 上正常工作,因为 SVG 元素不支持transform 属性。
设置代理功能很容易。存储默认(目标)事件,然后注册一个代理事件。然后,代理将使用您需要的任何逻辑启用/禁用目标事件:
svg.call(zoom);
var dblclickTarget = svg.on("dblclick.zoom");
var mouseScrollTarget = svg.on("mousewheel.zoom");
function eventProxy(fn){
return function(){
// Enable events if enableEvents=== true
if(enableEvents){
fn.apply(this, arguments)
}
}
};
svg.on("wheel.zoom", eventProxy(dblclickTarget))
.on("mousewheel.zoom", eventProxy(mouseScrollTarget));
通过以这种方式应用代理模式,您可以简单地更改“enableEvents”变量来启用或禁用事件。
我相信所选答案适用于小于 5 的版本,但以防万一这是我解决问题版本 5.15.x 的方式
使用这个 .on("dblclick.zoom", null); 在文档中注明,但当我尝试使用它时它实际上抛出了一个错误(你能相信我的应用程序的神经吗?哈哈)。
https://github.com/d3/d3-zoom/blob/main/README.md#zoomTransform
.filter 没有使用 dblclick.zoom 方法,而是为我解决了问题。
我已经在使用双击事件来满足其他用户的需求。因此,在某些特定情况下,我不希望发生双击缩放。
D3.select('svg')
.call(D3.zoom()
.scaleExtent([-5, 8])
.extent([[0, 0], [300, 300]])
.on('zoom', () => {
D3.selectAll('g')
.attr('transform', D3.event.transform);
this.updateAfterInit(this.root);
})
.filter(() => {
const foundNode = this.N.findNodeByID(D3.event.srcElement.id.split('_')[1])
if ( !!foundNode && D3.event.type === 'dblclick' && foundNode.data.type === 'SearchRelationspec') {
return false;
} else {
return !D3.event.target.classList.contains('drawarea') && D3.event.type === 'dblclick';
}
})