上一篇说了在D3.js中动态增加节点及连线的一种实现方式，但是有后添加元素遮盖原节点的现象，这一篇说一下出现这个现象的解决办法。

  • 在D3.js中后添加的元素是会遮盖先添加的元素的，同时还有一个设定：后添加的Group2及Group2内的其他元素会遮盖先添加的Group1及Group1中的其他元素。

  • 举个栗子 别人都在过520，我在这里玩栗子 =.=：

    • 向SVG中添加了一个Group1，又添加了一个Group2：

    • 先向Group2中添加一个节点Group2_Node，在向Group1中添加一个节点Group1_Node，如果没有Group做容器，Group1_Node会遮盖Group2_Node，这也是上一篇【D3.js力导向图中新增节点及新增关系连线示例】里的现象，知道你们懒得点过去看，下面是当时的效果图（姓名6和姓名3之间的连线遮挡了姓名3和姓名6节点）

  • 根据上面说的，改动两处，废话终于说完了，看代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://d3js.org/d3.v4.min.js"></script>
  7. </head>
  8. <body>
  9. <svg width="960" height="500"></svg>
  10. </body>
  11. <script type="text/javascript">
  12.     var nodes = [
  13.         { name: "姓名1"},
  14.         { name: "姓名2"},
  15.         { name: "姓名3"},
  16.         { name: "姓名4"},
  17.         { name: "姓名5"},
  18.     ];
  20.     var links = [  { source : 0  , target: 2 } , { source : 1  , target: 2 } ,
  21.         { source : 3  , target: 2 } , { source : 3  , target: 4 } ,
  22.     ];
  24.     var width = 1024;
  25.     var height = 738;
  26.     var svg = d3.select("svg")
  27.         .attr("width",width)
  28.         .attr("height",height);
  29.     var circle_radius = 30;
  31.     // 通过布局来转换数据，然后进行绘制
  32.     var simulation = d3.forceSimulation(nodes)
  33.         .force("link", d3.forceLink(links).distance(200))
  34.         .force("charge",d3.forceManyBody().strength(-100))
  35.         .force("center",d3.forceCenter(width/2, height/2));
  37.     var color = d3.scaleOrdinal(d3.schemeCategory20);
  39.     var links_group = svg.append('g');// 改动了这里
  40.     var nodes_group = svg.append('g');// 改动了这里
  42.     // 绘制线
  43.     var svg_links = links_group.selectAll("path")// 改动了这里
  44.         .data(links)
  45.         .enter()
  46.         .append("path")
  47.         .style("stroke","#ccc")
  48.         .style("stroke-width",3);
  50.     //节点对象
  51.     var svg_nodes = nodes_group.selectAll("circle")// 改动了这里
  52.         .data(nodes)
  53.         .enter()
  54.         .append("circle")
  55.         .attr("r",circle_radius)
  56.         .attr("fill","yellow")
  57.         .call(d3.drag()
  58.             .on("start", dragstarted)
  59.             .on("drag", dragged)
  60.             .on("end", dragended));
  61.     function dragstarted(d) {
  62.         if (!d3.event.active)
  63.             simulation.alphaTarget(0.002).restart();
  64.         d.fx = d.x;
  65.         d.fy = d.y;
  66.     }
  67.     function dragged(d) {
  68.         d.fx = d3.event.x;
  69.         d.fy = d3.event.y;
  70.     }
  71.     function dragended(d) {
  72.         if (!d3.event.active)
  73.             simulation.alphaTarget(0);
  74.     }
  75.     //节点描述
  76.     var svg_text = svg.selectAll("text")
  77.         .data(nodes)
  78.         .enter()
  79.         .append("text")
  80.         .style("fill","#000")
  81.         .attr("dominant-baseline","middle")
  82.         .attr("text-anchor", "middle")//在圆圈中加上数据
  83.         .text(function(d){return d.name;});
  85.     //箭头
  86.     var marker=
  87.         svg.append("marker")
  88.             .attr("id", "resolved")
  89.             .attr("markerUnits","userSpaceOnUse")
  90.             .attr("viewBox", "0 -5 10 10")//坐标系的区域
  91.             .attr("refX",34)//箭头坐标
  92.             .attr("refY", -1)
  93.             .attr("markerWidth", 12)//标识的大小
  94.             .attr("markerHeight", 12)
  95.             .attr("orient", "auto")//绘制方向，可设定为：auto（自动确认方向）和 角度值
  96.             .attr("stroke-width",2)//箭头宽度
  97.             .append("path")
  98.             .attr("d", "M0,-5L10,0L0,5")//箭头的路径
  99.             .attr('fill','#000000');//箭头颜色
  101.     function draw(){
  102.         svg_nodes
  103.             .attr("cx",function(d){return d.x;})
  104.             .attr("cy",function(d){return d.y;})
  105.             .attr("role",function (d) {
  106.                 return d.role;
  107.             });
  109.         svg_text
  110.             .attr("x", function(d){ return d.x; })
  111.             .attr("y", function(d){ return d.y; });
  113.         svg_links
  114.             .attr("d",function(d){
  115.                 return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y
  116.             })
  117.             .attr("marker-end", "url(#resolved)");
  118.     }
  119.     simulation.on("tick",draw);
  120.     svg.call(d3.zoom().scaleExtent([0.05, 8]).on('zoom', () => {
  121.         var transform = d3.event.transform;
  122.         svg_nodes.attr('transform', transform);
  123.         svg_links.attr("transform",transform);
  124.         svg_text.attr("transform",transform);
  125.     })).on('dblclick.zoom', null);
  127.     var e = { name: "姓名6"};
  128.     var f =  {source : 5  , target: 2};
  129.     d3.timeout(function(){
  130.         nodes.push(e);
  131.         links.push(f);
  132.         update()
  133.     }, 4000);
  134.     function update() {
  135.         svg_nodes = svg_nodes
  136.             .data(nodes, (d) => d.name)
  137.             .enter()
  138.             .append("circle")
  139.             .attr("r",circle_radius)
  140.             .attr("fill","yellow")
  141.             .merge(svg_nodes).call(d3.drag()
  142.             .on("start", dragstarted)
  143.             .on("drag", dragged)
  144.             .on("end", dragended));
  146.         svg_text = svg_text.data(nodes)
  147.             .enter()
  148.             .append("text")
  149.             .style("fill","#000")
  150.             .attr("dominant-baseline","middle")
  151.             .attr("text-anchor", "middle")
  152.             .text(function(d){return d.name;})
  153.             .merge(svg_text);
  155.         svg_links = svg_links.data(links, (d) => { return d.source.name + "-" + d.target.name; })
  156.             .enter()
  157.             .append("path")
  158.             .style("stroke","#ccc")
  159.             .style("stroke-width",3)
  160.             .merge(svg_links);
  162.         simulation.nodes(nodes);
  163.         simulation.force("link").links(links);
  164.         simulation.alpha(1).restart();
  165.     }
  166. </script>
  167. </html>
  • 再看效果图：

  • 总结：后添加的Group2及Group2内的已添加和即将添加的元素会遮盖先添加的Group1及Group1中的已添加和即将添加的元素。。

  • 写在最后：如果这些对你有些许帮助，麻烦点击一下“推荐”，非常感谢。

D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决的更多相关文章

  1. D3.js 力导向图的显示优化

    D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...

  2. D3.js力导向图中新增节点及新增关系连线示例

    大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang=&q ...

  3. D3.js 力导向图

    花了大半天看了一个八十几行的代码..心累 力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是D3更新了4.0.... 先贴代码 var svg = d3.select(&quo ...

  4. D3.js 力导向图的制作

    力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. ...

  5. D3.js 力导向图的拖拽（drag）与缩放（zoom）

    不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终 ...

  6. 记录d3.js 力导向图的平移缩放，类似地图导航点击某一项移动到当前位置

    项目中有用到d3.js用于图结构的查询, 需求如下: 右上角有个模糊搜索功能,查询出来的结果用列表展示 点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间 搜索出来的结果列表展示用的 ...

  7. D3.js 力导向图（气泡+线条+箭头+文字）

    <!DOCTYPE html> <meta charset="utf-8"> <style> .link { fill: none; strok ...

  8. D3.js 力导向图（小气泡围绕中心气泡）

    html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  9. 【 D3.js 高级系列 — 2.0 】 机械图 + 人物关系图

    机械图(力路线图)结合老百姓的关系图中的生活,这是更有趣. 本文将以此为证据,所列的如何图插入外部的图像和文字的力学. 在[第 9.2 章]中制作了一个最简单的力学图.其后有非常多朋友有疑问,基本的问 ...

随机推荐

  1. oracle如何检查用户是否用了默认密码

    如果使用默认密码,很可能就对你的数据库造成一定的安全隐患,那么可以使用如下的查询获得那些用户使用默认密码 select username "User(s) with Default Pass ...

  2. python批量导出项目依赖包及批量安装的方法

    在Python中我们在项目中会用到各种库,自带的自然不必再说,然而如果是三方库,则在进行项目移植时通常需要在新的环境下安装需要的三方库文件,面对较大项目中众多的三方库,可以先将项目依赖库导出到txt文 ...

  3. JavaScript--微博发布效果

    效果图: 实现思路:  当发布按钮被点击时,又会分为三种情况 1.如果输入的内容为空,弹出提示:不能发布空微博 2.如果输入的文字超过120,弹出提示,微博内容不能超过120 3.正常发布微博到列表里 ...

  4. jQuery 图片跟着鼠标动

    html默认鼠标样式改成图片时格式为 .ani 图片跟随鼠标挪动 html <div id="mouseImg"> <img src="images/问 ...

  5. dva框架简单描述使用

    首先传统的create-router-app脚手架生成的脚手架我们写仓库的时候用reducers进行调用还有thunk进行异步操作的时候,需要多层函数进行调用,这样会让我们代码进行维护的时候变得麻烦, ...

  6. 在沙箱中IE不能上网的解决方法

    近期在解决一个问题,在我们的沙箱中IE不能上网 现象:     IE不能上网.输入www.baidu.com 提示:不能查找到DNS.也不能ping 通     其它浏览器上网没有问题(SG浏览器,C ...

  7. matplotlib绘制热力图

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/jin_tmac/article/deta ...

  8. QQ 聊天机器人API

    QQ机器人是腾讯陆续推出的的人工智能聊天机器人的总称. 都说小Q妹妹聪明好学,我们能够教她说话.也能够请他帮忙查询邮编.手机号,或者解释成语.翻译成语,据说她还会查询手机号码归属地.应用科学计算器. ...

  9. OpenStack Nova启动实例流程

    1.概述 启动一个新的实例,会涉及到OpenStack Nova中的多个组件: API服务器,接收用户端的请求,并且将其传递给云控制器. 云控制器,处理计算节点.网络控制器.API服务器和调度器之前的 ...

  10. @gym - 101190B@ Binary Code

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 我们称一组字符串是 "前缀码",当且仅当不存 ...