Javascript d3.js v4：如何在鼠标单击节点后显示图像

由于仍然缺乏使用d3.js的经验，我遇到了一个障碍。 希望外面的任何人都能帮助我

我试图在鼠标单击图形中的节点时显示图片。 理想情况下，我希望单击几个节点并显示图像。双击某个节点应删除该图像。点击背景会删除所有显示的图像。但是一步一个脚印

到目前为止，我所做的是： 成功使用工具提示。我还可以在鼠标单击圆形节点时更改其大小

我将Mike Bostock的力定向图示例用作玩具项目：。 我使用的是d3.jsv4

基于web上的一个示例，我能够向所有节点添加图片：

我试着根据我的需要调整这个例子。首先，我补充说：

var defs = svg.append('defs');

此外:

var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter()
.append("circle")
.attr("r", 5)
.attr("fill", function(d) { return color(d.group); })
.call(node_drag)
.on("click", function(d){
    defs.append("pattern")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 12)
    .attr("height", 12)
    .append("image")
    .attr("xlink:href", 'https://assets-cdn.github.com/images/modules/open_graph/github-octocat.png')
    .attr("width", 12)
    .attr("height", 12)
    .attr("x", 0)
    .attr("y", 0);
})

在我的浏览器中，html表示已添加图像：

但图像不会显示在浏览器中

在这一点上，我转向你们，希望你们能给我一些提示，告诉我如何在用鼠标光标点击时，将图像显示为节点

非常感谢您的任何意见，

---

Markus

您的检查器显示图像已附加到图案，但从未链接到圆形元素

您不应该将模式附加到click函数内的defs，而应该只附加具有给定ID的模式

var defs = svg.append('defs');

defs.append("pattern")
    .attr("x", 0)
    .attr("y", 0)
    .attr("id", "myPattern")//ID here
    .attr("width", 12)
    .attr("height", 12)
    .append("image")
    .attr("xlink:href", 'https://assets-cdn.github.com/images/modules/open_graph/github-octocat.png')
    .attr("width", 12)
    .attr("height", 12)
    .attr("x", 0)
    .attr("y", 0);

。。。然后，在单击中，只需根据该ID更改圆的填充：

.on("click", function() {
    d3.select(this).attr("fill", "url(#myPattern)")
})

---

这是Bostock的bl.ock，其中包含了这些更改（我将圆圈变大了，这样您可以更好地看到图片）：

您好Gerardo:非常感谢。您的输入建议进行以下修改：我为每个节点添加了一个额外的defs.append（“pattern”）部分，其id对应于json文件中的id属性。接下来，在鼠标单击的部分I中，从d.id构建id，并用作填充。我还增加了半径。最后，我创建了一个双击事件，它可以将所有内容返回。我使用python创建index.html文件以处理许多部分。祝你一切顺利，马库斯