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

希望這會有所幫助！