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

将鼠标悬停在d3.js散点图中的点上时显示图像

1 个答案: