d3.js масштабирование координат мыши

Question

Im использует функцию масштабирования d3.js для увеличения изображения внутри svg. Я использую маску, чтобы показать нижележащее изображение внизу. Если я не масштабирую маску, и координаты курсора мыши совпадают идеально. Однако, когда я начинаю увеличивать координаты мыши, не переводится на уровень масштабирования, поэтому отображение карты больше не выстраивается с курсором.

вот что я использую до сих пор ... Я предполагаю, что при масштабировании должен быть какой-то перевод координат?

var lightMap = d3.select("#lightMap").call(d3.behavior.zoom().scaleExtent([1, 3]).on("zoom", zoom)); 
var darkMap = d3.select("#darkMap").call(d3.behavior.zoom().scaleExtent([1, 3]).on("zoom", zoom)); 


function zoom() { 
lightMap.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
darkMap.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 


} 
var svg = d3.select("svg"); 


svg.on('mousemove', function() { 

var coordinates = [0, 0]; 
coordinates = d3.mouse(this); 
var x = coordinates[0]; 
var y = coordinates[1]; 



    primaryCircle.setAttribute("cy", y + 'px'); 
    primaryCircle.setAttribute("cx", x + 'px');   

});

Answer 1

(я знаю, что это поздний ответ, но у меня была та же проблема, и думал, что я разделю, как я установил его для будущих людей, которые видят это)

Fix: Используйте coordinates=mouse(lightMap.node())/darkMap.node() вместо mouse(this) , В качестве альтернативы и, возможно, более правильно, вызовите режим масштабирования на svg и продолжайте использовать mouse(this).

Объяснение: Вы вызываете функцию MouseMove на svg, так mouse(this) получает координаты в пределах svg элемента. Однако вы не применяете поведение масштабирования до svg, поэтому вы получаете неправильные координаты. Вызовите mouse(_) на элемент, который увеличивает масштаб.