d3.js v4：如何在节点

Question

使用d3.js仍然缺乏经验我遇到了障碍。 希望有人可以帮助我。

我试图在鼠标点击图表中的节点时显示图片。 理想情况下，我想点击几个节点并显示图像。双击节点应删除图像。然后单击背景将删除所有显示的图像。但是一步一步。

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

我用作玩具项目Mike Bostock的强制导向图示例：https://bl.ocks.org/mbostock/4062045。 我正在使用d3.js v4

基于网络上的示例，我能够将图片添加到所有节点： Add different images for nodes in d3 v4 network graph

我试图根据我的需要定制这个例子。首先我补充道：

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表示已添加图片：

但是图片没有在浏览器中显示。

在这一点上，我转向你，希望能有一些提示，我可以在用鼠标光标点击它时将图像显示为节点。

任何输入都非常感谢， 马库斯

Answer 1

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

不应该将模式附加到click函数内的defs，而应该只使用给定的ID附加模式...

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

...然后，在点击内部，只需根据该ID更改圆圈的填充：

public interface BeanCreator<T> {   
   public T createBean();
   public Class<T> getClazz();
}

这是Bostock的bl.ocks带有这些变化（我把圆圈做得更大，这样你就能更好地看到图像）：https://bl.ocks.org/anonymous/0e653b6d21c8d57afa234d5d1765efe0/78ba15e533a2b8f8e6575a30d97b27d156ce2faf