Продвигать события масштабирования в d3.js

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

Надеется, что это помогает!

EDIT

Если у вас есть много элементов, и вам не нравится придавать трансфокатора слушатель ко всем элементам, то вы можете прикрепить трансфокатор к основной группе, которая держит все.

Как это:

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

Присоединить трансфокатора слушателя к группе.

svg.call(zoom); 

Рабочий код here