Javascript 在鼠标上方显示每个切片的图像

我想在鼠标上方显示每个切片的图像。如何在此脚本中从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"
} ];

---

代码链接：

这就是你要找的吗

示例图像的来源：

数据快照：

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

我不得不重新排列很多svg元素，特别是def和中心圆。请记住，始终建议将带有过滤器和模式的def附加到SVG中，而不是其中的元素，如果这样做，请确保相应的元素被相应地转换

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

鼠标上方的中心圆调用由d.data.image设置的图案图像：

---

希望这有帮助，如果您有任何问题，请告诉我

你能告诉我们到目前为止你都做了些什么吗？或者给我们提供一些你想展示的样品图片？我仍然有这个问题。你能看看我的照片吗？我想插入什么。我认为“形象：“graphics/a.svg 4张不同于我的文件的图片或另一台服务器上的4张图片示例：href=@RobertAndersson我希望您理解我的意思。我是否应该在我的服务器上插入带有链接的图片。如何使用服务器href中的图片对中心圆上的每个切片进行鼠标移动。谢谢。我想将鼠标移到rem上。”ove image.d3.选择“图案图像”。删除；但如果将鼠标悬停在此图表上，图像将不会再次显示该图像。如果您在第一次鼠标悬停时删除图像，则下次鼠标悬停在圆弧上时将找不到该图像。您必须每次都附加该图像。相反，将其更改为null，这是一个分叉：

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

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