javascript - 鼠标悬停时显示每个切片的图像

Question

我想在鼠标悬停时显示每个切片的图像。如何在此脚本中从 JSON 数组加载图像？

我希望工具提示显示从外部文件加载的图像。

var data = [
{
    "str_lab": „A“,
    "num": 300,
„image: “http://graphics/a.svg"
},
{
    "str_lab": „B“,
    "num": 44,
„image: “http://graphics/b.svg"

},
{
    "str_lab": „C“,
    "num": 215,
„image: “http://graphics/c.svg"
},
{
    "str_lab": „D“,
    "num": 30,
„image: “http://graphics/d.svg"
} ];

代码链接:Plunker

Answer 1

这是您要找的吗？

Code Plunkr with mouseover resolving images (with href) as a pattern

示例图像的来源:https://developers.google.com/speed/webp/gallery

您的数据快照:

{
    "str_lab": "A",
    "num": 100,
    "image": 'https://www.gstatic.com/webp/gallery3/2.png'
},

我不得不重新排列很多svg元素(尤其是 defs 和中心 circle )。请记住，始终建议附加 defs带有过滤器和模式到SVG而不是 <g>其中的元素 AND 如果这样做，请确保相应的元素是 transform相应编辑。

以下是代码中的一些相关更改:

var pattern = defs.append('pattern')
 .attr('id', 'image')
 .attr('patternUnits', 'userSpaceOnUse')
 .attr('width', 300)
 .attr('height', 300);

var image = pattern.append('image').attr('x', 0).attr('y', 0).attr('width', 124)
.attr('height', 124);

鼠标悬停时的中心圆调用 d.data.image 设置的图案图像:

    d3.select('pattern image')
        .attr('xlink:href', d.data.image);
    svg.select('circle.image')
        .attr('fill','url(#image)')

希望这对您有所帮助，如果您有任何疑问，请告诉我。 :)