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表示图像添加:
但图像没有在显示浏览器。
在这一点上,我转向你,希望得到一些提示,我点击鼠标光标时如何完成将图像显示为节点。
任何输入被高度赞赏, 马库斯
答
你的检查员是表示将图像附加在该模式,但它从未被连接到圆元件。
而是追加模式点击功能里面的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
赫尔lo Gerardo:非常感谢。您的输入建议进行以下修改:我为每个节点添加了一个额外的defs.append(“pattern”)部分,其id与json文件中的id属性相对应。接下来在鼠标点击部分我构建了从d.id id,并用作填充。我也增加了半径。最后,我创建了一个双击事件,可以让所有事情都回来。我使用python创建了index.html文件,以便应对许多部分。一切顺利,马库斯 –
Markus