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

rZTxO.png

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

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

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

2017-10-14

Markus

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/527245.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

语言速算24点的小窍门_4秒钟1道题!12岁少年三夺24点大赛冠军

数学文化节上,参加大赛的孩子们。夺得24点大赛冠军的华跃麟。本报讯 (重庆晨报上游新闻记者 秦健)“哇,太厉害了。”“快快快,超过他们俩了!”昨天下午,“第二届重庆数学文化节”在重庆市德普外国语学校体育活动中心举…

用计算机表白我不喜欢你了,隐藏式表白,表白不一定要用“我喜欢你”这几个字...

要知道女生都是喜欢浪漫的,浪漫不失为一种提升表白成功率的方式。但表白的时候,如果只是一束鲜花,一句简单“我喜欢你”,难免显得太过乏味,而且不够浪漫。那该怎么给表白添加一点新意和浪漫呢?下面,是小编…

总线制和多线制示意图_主机总线线 总线制和多线制示意图

消防主机总线不能上电是什么原因?一般回路线出现短路,开路,接地故障,还有回路卡损坏都会引起报总线故障的,排除方法:怀疑是短路故障引起的可用以下方法,在主机回路接线端把回路线的正负极线拆下…

有大学生双修计算机专业和数学专业的吗,南开大学再现学霸班

财务管理专业作为一个文理兼收的专业,系里鼓励学生建立复合的知识结构,培养学生多元的学习兴趣。在王永进、张晓农等多位教师的鼓励下,2014级财务管理专业的许多学生选择了双修和辅修其他专业。全班6个同学取得了数学双学位,两个同…

切片分析报告格式_社科论文写作101-APA数据分析结果报告格式

什么比写论文更惨?改论文!!特别是搞量化数据的,少个数据或报告格式不正确的话,重新搞数据和格式吧——又要打开spss,又要在网上看数据分析步骤,又要在熟悉的word界面花上一天。所以,…

计算机user用户的密码存储在,windows存放用户密码的文件

密码丢失的解决的办法提起Windows 2000密码丢失,确实是件令人头痛的事了,不管是自己不小心忘了密码也好,被别人恶意修改也好,一般都是重装系统,不但浪费时间,而且可能自己辛辛苦苦存储的资料也随之烟消云散…

如何关闭借呗订阅开通通知_支付宝花呗借呗隐藏规则,芝麻分600以上,花呗3.6万,借呗12万!...

阅读本文前,请您先点击上面的“蓝色字体”,再点击“关注”,这样您就可以继续免费收到文章了。每天都有分享,完全是免费订阅,请放心关注。 注:本文转载自网络,侵删经常遇到网友反馈,…

对外经贸大学计算机应用基础,对外经贸大学计算机应用基础试题.doc

对外经贸大学计算机应用基础试题1、计算机中数据的表示形式是A)八进制 B)十进制 C)二进制 D)十六进制2、硬盘工作时应非凡注重避免A)噪声 B)震动 C)潮湿 D)日光3、针式打印机术语中,24针是指A)24x24点阵 B)信号线插头有24针 C)打印头内有24x24根针 D)打印头内有24根…

骁龙660是32位还是64位_微软公布v2004最低处理器要求,放弃32位系统,你的CPU还能支持吗?...

最近关于win10 20H1(win10更新五月版)的消息铺天盖地席卷而来,据说只有开发者用户可以先行在MSDN订阅网站下载该版本的ISO镜像文件,对于主流消费者而言,预计要再煎熬等到28日。而且微软也提前更新支持文档,…

大专计算机应用技术答辩,计算机应用技术专业硕士答辩.ppt

计算机应用技术专业硕士答辩* 基于密度和中心点的分布式数据流聚类算法的研究 姓 名:侯杰 学 号:Y专 业:计算机应用技术 研究方向:数据挖掘与分布式计算 指导老师:高宏宾 报告内容 主要研究内容 计划步骤 对聚类算法的…

xlsxwriter写行合并_使用实现XlsxWriter创建Excel文件并编辑

之前操作Excel使用过其他的方式,针对Excel的写入来说,使用过xlwt模块,也直接使用过win32com接口。如果说哪个最能够发挥Excel的威力,那么肯定是win32com接口实现的方式,然而这种方式需要的是Office软件支持。至于xlwt&…

中石油《计算机应用基础》,2017中国石油大学《计算机应用基础》第3阶段在线作业.doc...

2017中国石油大学《计算机应用基础》第3阶段在线作业.doc (23页)本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!19.90 积分窗体顶端1(2.0分)在Excel2010的工作表中,假定C3:C8区…

centos7重装python_CentOS7重装yum和python

卸载现有的Python和Yum1、删除现有Python##强制删除已安装程序及其关联rpm -qa|grep python|xargs rpm -ev --allmatches --nodeps##删除所有残余文件 ##xargs,允许你对输出执行其他某些命令whereis python |xargs rm -frv##验证删除,返回无结果whereis …

html标记的索引,基于HTML标记分析及中文切词的网页索引研究与实现

摘要:本文深入研究了HTML标记对网页内容的修饰作用,并对大量网页的结构进行了分析,通过对比各种中文文档的索引和加权策略以及中文切词,英文Stemming操作等算法,设计和实现了基于HTML标记的网页分析和加权策略与算法,完善了基于词典的切词算法. 为了合理地实现对网页…

tl494c封装区别_TL494参数,功能介绍,TL494应用电路图,封装,管脚及TL494 PDF中文资料手册...

TL494中文资料功能介紹 中文 :功能介紹 英文 : Voltage mode PWM control circuit.品牌 : Contek封装 :引脚 :功能介紹 中文 :功能介紹 英文 : SMPS Controller品牌 : Fairchild封装 :引脚 :功能介紹 中文 :功能介紹 英文 : SWITCHMODE PULSE WIDTH MODULATION CONTROL CIRCUIT…

计算机软件应用员,济宁计算机办公应用软件操作员

济宁计算机办公应用软件操作员?信息化是当今社会发展的风向标,对每一个工作岗位来说,信息环境下办公软件的有效使用已成为岗位效率提升的重要内驱力。事实上,这种内驱力的大小主要是由软件使用过程的技巧化决定的,技巧化的实现主要体现在表象化阶段、操作化阶段、应…

tableau三轴合并_举个栗子!Tableau技巧(34):同一张图表如何呈现多个度量

Tableau用户:怎样把条形状和折线图放在同一个图表里?阿达:你想在同一个工作表里放入两个维度吗?Tableau用户:是的,有这样的栗子吗?的确,在我们的日常数据分析工作中,常常…

软件测试方法国内外研究现状,恶意软件检测的国内外研究现状

恶意软件检测的国内外研究现状文献综述恶意软件检测方法基于行为Analysis of Machine Learning Techniques Used in Behavior-Based Malware Detection表明随着恶意软件的高速增长,传统的静态分析已经不能够满足检测的需求,所以使用机器学习的方法来对恶…

产品战略规划十步法ppt_从管理咨询角度谈如何系统地做产品战略规划?

来源:知乎作者:柚先生,著作权归作者所有。一个优秀的PM必须系统掌握与产品相关的知识和技能,本文结合了笔者工作以来的收获与最近研读的《产品心经》和《金字塔原理》,分享一套做战略规划的系统思维和方法论(同时适用于…

计算机用鼠标画图,实现鼠标在电脑上画画

鼠标的功能多种多样你知道怎么用鼠标画画吗?不知道的话跟着学习啦小编一起来学习怎么用鼠标画画。鼠标在电脑上画画的步骤首先打开国际上使用比较受欢迎的漫画和插画类绘图软件SAI,然后CTRLN新建一个文件,并使用软件右边工具栏的油漆桶,点选…