Question

我希望能够缩放和鼠标悬停元素。其中包含一个示例，后面是有关该方案的更多详细信息。

https://jsfiddle.net/pkerpedjiev/ny5ob3h2/4/

var svg = d3.select('svg')

var zoom = d3.behavior.zoom()
.on('zoom', draw)

svg.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', 400)
.attr('height', 400)
.attr('fill', 'transparent')
.call(zoom)

var xScale = d3.scale.linear()
.domain([0, 10])
.range([0,10])

zoom.x(xScale)

svg.append('text')
.attr('x', 50)
.attr('y', 100)
.text('Hi there')
.attr('visibility', 'hidden')

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

function draw() {
    d3.selectAll('circle')
  .attr('r', xScale(10));
}

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

有没有办法解决这个问题？在圈子上设置pointer-events到none会修复缩放，但不会调用mouseover事件。

是否可以同时调用圆圈的mouseover并在鼠标悬停在圆圈上时进行缩放？

Answer 1

是的，这也可以通过放大圆圈来实现。

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')
});

工作示例here

希望这有帮助！

修改

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

像这样：

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

将缩放侦听器附加到该组。

svg.call(zoom);

工作代码here

在d3.js中传播缩放事件

1 个答案: