d3.js实现双击删除节点并删除节点上的文字

最近项目遇到一个问题：删除节点，节点上的文字却无法删除。

经过F12的调试，我发现原来自己写的节点、连线、文字分别包裹在不同的g标签内。

于是出现了两种解决方案：

（1）把文字依附在节点上

（2）选中节点的时候遍历文字确保是哪个文字和该节点是对应的

我个人认为第一种方案是最优化的，我也推荐大家遇到这个问题采用第一种方案。

但是我项目之前写的结构就这样了，如果现在改的话，需要改的代码太多，于是我采用第二种方案。

废话之后，干货奉上

以下是我写的一个demo:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>双击删除节点</title><script src="http://d3js.org/d3.v3.min.js"></script>  </head><body><script>var width = 1366;var height = 768;var img_w = 77;var img_h = 80;var radius = 30;var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);d3.json("json/song.json",function(error,data){if(error){return console.log(error);}var dataset = data;console.log(dataset);var force = d3.layout.force().nodes(dataset.nodes).links(dataset.links).size([width,height]).linkDistance(100).charge(-1500).start();var links = svg.selectAll("line").data(dataset.links).enter().append("line").attr("class","lines").attr("style","stroke: #CCCCCC; stroke-width: 2;");var nodes = svg.selectAll("circle").data(dataset.nodes).enter().append("circle").attr("r",radius).attr("class","nodes").attr("fill","pink").on("dblclick",function(d){//双击节点删除，获取选中节点的在json中的name的值d3.select(this).remove();var clickNodeName = d.name;//点击节点的名字d3.selectAll(".nodetext").each(function(d,i){var temp = d.name;if(temp==clickNodeName){
//                                      alert("相等");d3.select(this).remove();}});d3.selectAll(".lines").each(function(e){if(e.source===d||e.target===d){d3.select(this).remove();}})}).on("mouseout",function(d,i){nodes.style("stroke",function(edge){if(edge.source===d){return "#CCCCCC";}});links.style("stroke","#CCCCCC");}).call(force.drag);var text_dx = -20;var text_dy = 20;console.log("x："+text_dx);console.log("y:"+text_dy);var nodes_text = svg.selectAll(".nodetext").data(dataset.nodes).enter().append("text").attr("class","nodetext").attr("dy",".35em").attr("text-anchor","middle").text(function(d) { return d.name; });force.on("tick", function() {  links.attr("x1", function(d) { return d.source.x; }).attr("y1", function(d) { return d.source.y; })  .attr("x2", function(d) { return d.target.x; })  .attr("y2", function(d) { return d.target.y; });nodes.attr("cx", function(d) { return d.x; })  .attr("cy", function(d) { return d.y; });  nodes_text.attr("dx", function(d) { return d.x-img_w/4; }).attr("dy", function(d) { return d.y+5; }); });  });</script></body>
</html>

json文件如下：

{"nodes":[{"name":"人物1","group":3,"img":"img/1.jpg"},{"name":"人物2","group":3,"img":"img/2.jpg"},  {"name":"人物3","group":3,"img":"img/3.jpg"},  {"name":"人物4","group":3,"img":"img/4.jpg"},{"name":"人物5","group":3,"img":"img/5.jpg"},{"name":"人物6","group":2,"img":"img/6.jpg"},  {"name":"人物7","group":2,"img":"img/7.jpg"},  {"name":"人物8","group":2,"img":"img/8.jpg"},  {"name":"人物9","group":2,"img":"img/9.jpg"},{"name":"人物10","group":2,"img":"img/10.jpg"},{"name":"人物11","group":1,"img":"img/11.jpg"},{"name":"人物12","group":1,"img":"img/12.jpg"},{"name":"人物13","group":1,"img":"img/13.jpg"},{"name":"人物14","group":1,"img":"img/14.jpg"},{"name":"人物15","group":1,"img":"img/15.jpg"},{"name":"人物16","group":1,"img":"img/16.jpg"}],"links":[{"source":0,"target":1,"relation":"\ue900 \ue904 \ue908 \ue9a1"},  {"source":0,"target":2,"relation":"关系一"},{"source":0,"target":3,"relation":"关系二"},{"source":0,"target":4,"relation":"\ue909"},{"source":5,"target":6,"relation":"\ue9a1"},  {"source":5,"target":7,"relation":"\ue9a2"},{"source":5,"target":8,"relation":"\ue9a3"},{"source":5,"target":9,"relation":"\ue9ad"}, {"source":10,"target":11,"relation":"\ue9c1"},{"source":10,"target":12,"relation":"\ue9c3"},{"source":10,"target":13,"relation":"\ue9dd"},{"source":10,"target":14,"relation":"\ue9fd"},{"source":10,"target":15,"relation":"\ue9ed"},{"source":10,"target":11,"relation":"\ue91d"},{"source":0,"target":5,"relation":"\ue93d"},{"source":5,"target":10,"relation":"\ue95d"},{"source":10,"target":0,"relation":"\ue97d"}] }

测试效果如下：

d3.js实现双击删除节点并删除节点上的文字相关推荐

前端：JS/25/DOM官方定义，DOM分类，HTML节点树（节点关系，节点类型，），核心DOM中公共的属性和方法（节点访问，查找DOM节点，节点属性，节点的创建，追加和删除）
DOM官方定义 DOM,Document Object Model,文档对象模型,我们可以把网页中的所有"东西"看成是对象": DOM的官方定义:DOM可以使用脚本,动态 ...
JS对DOM节点的操作--增加节点，删除节点
(1):DOM :DOM文档树的全称是document object model ,也就是文档对象模型,在js中,把整页面当成一个dom树,而我们可以对每一个节点都可以进行相应的操作,比如创建一个节点 ...
D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素
D3.js的v5版本入门教程(第五章) 1.选择元素现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下假设我们的<body>中有 ...
js添加多个子节点_js添加和删除节点，方法调用是通过子节点中的节点来添加的呢。...
html> new document 学号姓名操作 xh001 王小明删除 xh002 刘小芳删除 var table = document.getElementById("t ...
html用js添加兄弟节点,jquery 删除节点添加节点找兄弟节点的简单实现
$().empty(); //该方法会删除当前节点下的所有子节点,请注意当前节点不会被删除 $().remove(); //该方法会删除当前节点下的所有子节点,请注意当前节点会被删除 $(). ...
JS节点操作（2）- 创建节点，添加节点，删除节点，复制节点
节点操作 1. 创建节点 document.createElement() 2. 添加节点 2.1 node.appendChild(child) 添加到子元素数组的末尾 <body>&l ...
JS+jQuery简单版发布、删除留言
首先用户在输入框中输入内容,按下发布按钮,内容到下面的li中,并且清空输入框中的内容下面这个li元素就是后面创建的 <!DOCTYPE html> <html lang=" ...
JavaScript基础12-day14【DOM查询(获取元素节点、获取元素节点的子节点)、全选练习、DOM增删改、DOM添加删除记录、Window对象方法】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
DOM-4 【utils/待讲评】节点创建删除、元素属性设置获取、节点属性
讲评节点创建 Document.prototype ← document.createElement('div') document.createTextNode('xxx') // 创建文本节点 ...

d3.js实现双击删除节点并删除节点上的文字

d3.js实现双击删除节点并删除节点上的文字相关推荐

最新文章

热门文章