Javascript 在d3.js中传播缩放事件_Javascript_D3.js

Javascript 在d3.js中传播缩放事件

javascript d3.js

Javascript 在d3.js中传播缩放事件,javascript,d3.js,Javascript,D3.js,我希望能够在元素上进行缩放和鼠标移动。包括一个示例，后面是关于该场景的更多详细信息该示例仅包含一个圆圈和一些文本。除非鼠标位于圆上方，否则文本不可见。如果我使用鼠标滚轮滚动，圆圈的大小会随着缩放行为而变化。但是，如果鼠标位于圆上方，则缩放不起作用有办法解决这个问题吗？将圆上的指针事件设置为无可以修复缩放，但不会调用鼠标悬停事件是否有办法调用圆的鼠标盖并在鼠标位于圆上方时进行缩放？是的，也可以在圆上进行缩放 svg.append('circle') .attr('cx', 50) .att

我希望能够在元素上进行缩放和鼠标移动。包括一个示例，后面是关于该场景的更多详细信息

该示例仅包含一个圆圈和一些文本。除非鼠标位于圆上方，否则文本不可见。如果我使用鼠标滚轮滚动，圆圈的大小会随着缩放行为而变化。但是，如果鼠标位于圆上方，则缩放不起作用

有办法解决这个问题吗？将圆上的

指针事件

设置为

无

可以修复缩放，但不会调用

鼠标悬停

事件

是否有办法调用圆的

鼠标盖

并在鼠标位于圆上方时进行缩放？

是的，也可以在圆上进行缩放

svg.append('circle')
.attr('cx', 50)
.attr('cy', 50)
.attr('r', 10)
.call(zoom)//giving on circle also
//.attr('pointer-events', 'none')
.on('mouseover', function(d) {
    svg.selectAll('text')
  .attr('visibility', 'visible');
})
.on('mouseout', function(d) {
    svg.selectAll('text')
  .attr('visibility', 'hidden')
});

工作示例

希望这有帮助

编辑

如果您有很多元素，并且不想将缩放侦听器附加到所有元素，则可以将缩放附加到包含所有元素的主组

像这样：

var svg = d3.select('svg').attr("x",500).attr("y",500).append("g")

将缩放侦听器附加到组

svg.call(zoom);

工作代码

是，也可以通过对圆进行缩放来实现

svg.append('circle')
.attr('cx', 50)
.attr('cy', 50)
.attr('r', 10)
.call(zoom)//giving on circle also
//.attr('pointer-events', 'none')
.on('mouseover', function(d) {
    svg.selectAll('text')
  .attr('visibility', 'visible');
})
.on('mouseout', function(d) {
    svg.selectAll('text')
  .attr('visibility', 'hidden')
});