d3.js html显示图片,d3.js v4：如何在鼠标点击节点后显示图像

在使用d3.js时仍然相当缺乏经验，我碰到了一个障碍。 希望有人能帮助我。d3.js v4：如何在鼠标点击节点后显示图像

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

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

我用作玩具项目迈克·博斯托克的力导向图示例：https://bl.ocks.org/mbostock/4062045。基于Web的，我能够将图片添加到所有节点上的例子 我使用d3.js v4的

我试图调整这个例子来我的需求。首先我说：

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

但图像没有在显示浏览器。

在这一点上，我转向你，希望得到一些提示，我点击鼠标光标时如何完成将图像显示为节点。

任何输入被高度赞赏， 马库斯

2017-10-14

Markus