將鼠標懸停在d3.js散點圖中的點上時顯示圖像

Question

我以前沒有使用過d3.js，而是試圖創建一個散點圖，將鼠標懸停在這些點上會顯示圖像本身（縮小為較小的尺寸）。

我看過一些教程，當鼠標指針懸停在這些點上時可以顯示文本。 例如，我查看了以下鏈接： 1和2 。 我想做類似的事情，但是當我將鼠標懸停在該點上時會顯示圖像本身。

我也不確定在本地文件夾中復制那些鏈接。 考慮第一個鏈接1 ，我在本地創建了index.html，serial.csv和scatter.css文件，並復制了給定的代碼。 但是，當我在瀏覽器中打開index.html時，看到一個帶有單個“ xAxis”按鈕的空白屏幕。 index.html文件似乎使用了該鏈接中沒有的scatter.js文件。 不知道從哪里可以得到它。 我的意圖是用圖像標簽代替文本。

有任何想法嗎？

Answer 1

我建議您觀看有關如何使用d3制作散點圖的視頻，特別是因為您不熟悉它。 我發現此視頻有助於制作散點圖：

https://vizhub.com/curran/9247d4d42df74185980f7b1f7504dcc5

然后，要使圖像具有懸停效果，您將需要使用工具提示 。 您必須將其附加到組成散點圖的所有圓圈上，然后將圖像作為“背景圖像”的屬性。 為此的代碼示例為：

let svg = d3.select('svg');

let tooltip = d3
    .select("body")
    .append("div")
       .attr("id", "tooltip")

svg.selectAll('circle')
    // Create scatterplot points from dataset
    .data(dataset)
    .enter()
    .append('circle')
        .attr('x', 'x-coord') // Location of circle on x-axis
        .attr('y', "y-coord") 
        .style('fill','#4aa89c')

        // Tooltip styling when mouse hovers over
        .on("mouseover", function (d, i) {
            d3.select(this).style("fill", "a8eddf");
            tooltip.attr("id", "tooltip")
            tooltip.style("fill", "#a8eddf")
            tooltip.attr("data-date", d[0])
            tooltip.style('background-image','url("image-url")')
            tooltip.style('background-size','cover')
            tooltip.style('opacity', 1)             
         })

        // Tooltip styling when mouse is off the point
        .on("mouseout", function () {
            d3.select(this)
                .transition()
                .duration(400)
                .style("fill", "#4aa89c");
            tooltip.style("opacity", 0);
        })