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

最新推荐文章于 2024-08-15 09:14:52 发布

diexinying0496

最新推荐文章于 2024-08-15 09:14:52 发布

阅读量662

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lmou/p/10896801.html

版权

上一篇说了在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节点）

addNode-博客园

根据上面说的，改动两处，~~废话终于说完了~~，看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width="960" height="500"></svg>
</body>
<script type="text/javascript">
    var nodes = [
        { name: "姓名1"},
        { name: "姓名2"},
        { name: "姓名3"},
        { name: "姓名4"},
        { name: "姓名5"},
    ];
 
    var links = [  { source : 0  , target: 2 } , { source : 1  , target: 2 } ,
        { source : 3  , target: 2 } , { source : 3  , target: 4 } ,
    ];
 
    var width = 1024;
    var height = 738;
    var svg = d3.select("svg")
        .attr("width",width)
        .attr("height",height);
    var circle_radius = 30;
 
    // 通过布局来转换数据，然后进行绘制
    var simulation = d3.forceSimulation(nodes)
        .force("link", d3.forceLink(links).distance(200))
        .force("charge",d3.forceManyBody().strength(-100))
        .force("center",d3.forceCenter(width/2, height/2));
 
    var color = d3.scaleOrdinal(d3.schemeCategory20);

    var links_group = svg.append('g');// 改动了这里
    var nodes_group = svg.append('g');// 改动了这里

    // 绘制线
    var svg_links = links_group.selectAll("path")// 改动了这里
        .data(links)
        .enter()
        .append("path")
        .style("stroke","#ccc")
        .style("stroke-width",3);
 
    //节点对象
    var svg_nodes = nodes_group.selectAll("circle")// 改动了这里
        .data(nodes)
        .enter()
        .append("circle")
        .attr("r",circle_radius)
        .attr("fill","yellow")
        .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));
    function dragstarted(d) {
        if (!d3.event.active)
            simulation.alphaTarget(0.002).restart();
        d.fx = d.x;
        d.fy = d.y;
    }
    function dragged(d) {
        d.fx = d3.event.x;
        d.fy = d3.event.y;
    }
    function dragended(d) {
        if (!d3.event.active)
            simulation.alphaTarget(0);
    }
    //节点描述
    var svg_text = svg.selectAll("text")
        .data(nodes)
        .enter()
        .append("text")
        .style("fill","#000")
        .attr("dominant-baseline","middle")
        .attr("text-anchor", "middle")//在圆圈中加上数据
        .text(function(d){return d.name;});
 
    //箭头
    var marker=
        svg.append("marker")
            .attr("id", "resolved")
            .attr("markerUnits","userSpaceOnUse")
            .attr("viewBox", "0 -5 10 10")//坐标系的区域
            .attr("refX",34)//箭头坐标
            .attr("refY", -1)
            .attr("markerWidth", 12)//标识的大小
            .attr("markerHeight", 12)
            .attr("orient", "auto")//绘制方向，可设定为：auto（自动确认方向）和 角度值
            .attr("stroke-width",2)//箭头宽度
            .append("path")
            .attr("d", "M0,-5L10,0L0,5")//箭头的路径
            .attr('fill','#000000');//箭头颜色
 
    function draw(){
        svg_nodes
            .attr("cx",function(d){return d.x;})
            .attr("cy",function(d){return d.y;})
            .attr("role",function (d) {
                return d.role;
            });
 
        svg_text
            .attr("x", function(d){ return d.x; })
            .attr("y", function(d){ return d.y; });
 
        svg_links
            .attr("d",function(d){
                return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y
            })
            .attr("marker-end", "url(#resolved)");
    }
    simulation.on("tick",draw);
    svg.call(d3.zoom().scaleExtent([0.05, 8]).on('zoom', () => {
        var transform = d3.event.transform;
        svg_nodes.attr('transform', transform);
        svg_links.attr("transform",transform);
        svg_text.attr("transform",transform);
    })).on('dblclick.zoom', null);
 
    var e = { name: "姓名6"};
    var f =  {source : 5  , target: 2};
    d3.timeout(function(){
        nodes.push(e);
        links.push(f);
        update()
    }, 4000);
    function update() {
        svg_nodes = svg_nodes
            .data(nodes, (d) => d.name)
            .enter()
            .append("circle")
            .attr("r",circle_radius)
            .attr("fill","yellow")
            .merge(svg_nodes).call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));

        svg_text = svg_text.data(nodes)
            .enter()
            .append("text")
            .style("fill","#000")
            .attr("dominant-baseline","middle")
            .attr("text-anchor", "middle")
            .text(function(d){return d.name;})
            .merge(svg_text);
            
        svg_links = svg_links.data(links, (d) => { return d.source.name + "-" + d.target.name; })
            .enter()
            .append("path")
            .style("stroke","#ccc")
            .style("stroke-width",3)
            .merge(svg_links);
     
        simulation.nodes(nodes);
        simulation.force("link").links(links);
        simulation.alpha(1).restart();
    }
</script>
</html>