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

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

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

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

我用作玩具项目迈克·博斯托克的力导向图示例：https://bl.ocks.org/mbostock/4062045。基于Web的，我能够将图片添加到所有节点上的例子我使用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表示图像添加：

image of html

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

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

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

来源

2017-10-14 Markus

你的检查员是表示将图像附加在该模式，但它从未被连接到圆元件。

而是追加模式点击功能里面的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)") 
})

这里是博斯托克的这些变化bl.ocks（我做出的圈更大，所以可以更好地看到图像）：https://bl.ocks.org/anonymous/0e653b6d21c8d57afa234d5d1765efe0/78ba15e533a2b8f8e6575a30d97b27d156ce2faf

来源

2017-10-14 00:47:53

赫尔lo Gerardo：非常感谢。您的输入建议进行以下修改：我为每个节点添加了一个额外的defs.append（“pattern”）部分，其id与json文件中的id属性相对应。接下来在鼠标点击部分我构建了从d.id id，并用作填充。我也增加了半径。最后，我创建了一个双击事件，可以让所有事情都回来。我使用python创建了index.html文件，以便应对许多部分。一切顺利，马库斯 – Markus

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

回答

相关问题