Изменить картинку на основе координат координаты

Question

Моя цель - перейти на 1 из 165 различных изображений в зависимости от того, в какой области была указана мышь. Я использую схему Dord Chord. Я новичок в java-скрипте, поэтому любая помощь будет хорошей.

This is the code i am working with

любой совет будет полезным. Я новичок в javascript, поэтому, пожалуйста, несите меня.

Answer 1

В данный момент у вас нет event listeners. Вам нужно добавить прослушиватель событий к объекту, где вы хотите, чтобы событие mouseover появлялось. Например:

d3.select('svg.chord').on('mouseenter', function() { *show image here* }) 

D3 также имеет удобную функцию, чтобы получить текущую позицию мыши на странице: https://github.com/mbostock/d3/wiki/Selections#d3_event

d3.event.pageY и d3.event.pageX

Так что вам нужно будет изменить свойства стиля на изображение, чтобы соответствуют позиции мыши. Что-то вроде этого:

d3.select('svg.chord').on('mouseenter', function() { 
    d3.select(this).append('img').attr({src:'/my/url'}) 
    .style({ 
    position:absolute, 
    top: d3.event.pageY, 
    left: d3.event.pageX}) 
}).on('mouseexit', function() { 
    d3.select('img').remove(); 
}) 

Надеюсь, что это поможет!