根据mouseover坐标位置更改图片

Question

我的目标是根据哪个区域有鼠标移至165个不同图像中的1个。我正在使用D3和弦图表。我是新的Java脚本，所以任何帮助将是好事。

This is the code i am working with

任何意见将是有益的。我是javascript新手，请耐心等待。

Answer 1

您目前在您的代码中没有任何event listeners。您需要将事件侦听器添加到要让鼠标悬停事件显示的对象。例如：

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

希望这会有所帮助！