力导向图练习

最新推荐文章于 2019-04-02 20:58:52 发布
oucbl
最新推荐文章于 2019-04-02 20:58:52 发布
阅读量904
点赞数 2
文章标签： d3.js 热力图力导向图
本文链接：https://blog.csdn.net/CDDN_JAVA/article/details/52633734
版权
力导向图练习

参考d3.js的学习网站：http://www.ourd3js.com/
<html>  
  <head>  
        <meta charset="utf-8">  
        <title>ArrowForce_z</title>  
  </head> 

<style>
   .nodetext {
     fill: #000ff;
     font-size: 16px;
     cursor: pointer;
     pointer-events: none;
   }

   .linetext {
    font-size: 15px ;
    font-family: SimSun;
    fill:#0000FF;
    fill-opacity:0.0;}

</style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js" ></script>
        <script>           
        var nodes = [
        {"name": "Y 药业有限公司", "type": "enterprise"},
        {"name": "C 投资管理有限公司", "type": "enterprise"},
        {"name": "A 投资管理有限公司", "type": "enterprise"},
        {"name": "B 投资管理有限公司", "type": "enterprise"},
        {"name": "刘大", "type": "people"},
        {"name": "史小", "type": "people"},
        {"name": "钟文秀", "type": "people"},
        {"name": "沈建", "type": "people"},
        {"name": "张少权", "type": "people"}];

        var edges = [
        {"source": 1, "target": 0, "relation": "股东"},
        {"source": 2, "target": 0, "relation": "股东"},
        {"source": 3, "target": 0, "relation": "股东"},
        {"source": 4, "target": 0, "relation": "董事长;法人"},
        {"source": 4, "target": 1, "relation": "法人;股东;执行董事兼总经理"},
        {"source": 5, "target": 0, "relation": "总经理"},
        {"source": 5, "target": 2, "relation": "法人;股东;执行董事兼总经理"},
        {"source": 6, "target": 0, "relation": "董事"},
        {"source": 6, "target": 1, "relation": "股东;董事"},
        {"source": 7, "target": 0, "relation": "监事"},
        {"source": 7, "target": 3, "relation": "股东;董事"},
        {"source": 8, "target": 3, "relation": "法人;股东;执行董事兼总经理"},
        {"source": 8, "target": 1, "relation": "股东"}];


        var width = 1024;
        var height = 768;

        var svg = d3.select("body")
                    .append("svg")
                    .attr("width",width)
                    .attr("height",height);

        //定义箭头标识
        var defs = svg.append("defs");
        var arrowMarker = defs.append("marker")
                    .attr("id", "arrow")
                    .attr("markerUnits", "strokeWidth")
                    //.attr("markerWidth", "12")
                    //.attr("markerHeight", "12")
                    .attr("viewBox", "0 -4 12 12")
                    .attr("refX", "88")
                    .attr("refY", "0")
                    .attr("orient", "auto")

        var arrow_path = "M-5,-5 L10,0 L-5,5";
        var arrow_path1 = "M0 -4 L0 4 L10 0";

        arrowMarker.append("path")
                    .attr("d", arrow_path)
                    .attr("fill", "#09F")

        var force = d3.layout.force()
                .nodes(nodes)       //指定节点数组
                .links(edges)       //指定连线数组
                .size([width,height])   //指定范围
                .linkDistance(200)  //指定连线长度
                .charge(-1000)  //相互之间的作用力
                .start();   //开始作用

        //console.log(nodes);
        //console.log(edges);

        //添加连线      
        var svg_edges = svg.selectAll("line")
                            .data(edges)
                            .enter()
                            .append("line")
                            .attr("class", "link")
                            .attr("stroke","#09F")
                            .attr("stroke-opacity","0.4")
                            //.attr("marker-start","url(#arrow)")
                            //.attr("marker-mid","url(#arrow)")
                            .attr("marker-end","url(#arrow)")
                            .attr("stroke-width", 1);
        //连线上文字                 
        var edges_text = svg.selectAll(".linetext")
                            .data(edges)
                            .enter()
                            .append("text")
                            .attr("class","linetext")
                            .text(function(d){
                                return d.relation ;
                            });
        var color = d3.scale.category20();

        //添加节点          
        var svg_nodes = svg.selectAll("circle")
                            .data(nodes)
                            .enter()
                            .append("circle")
                            //.attr("r",30)
                            .attr("r",function(d,i){console.log(d.weight);
                                return 1*(d.weight*3+17);})
                            .style("fill",function(d,i){
                                return color(d.weight);})
                            .on("mouseover",function(d,i){
                                //显示箭头 --- 绘制路径终点处，设置箭头大小
                                //svg_edges.attr("marker-end","url(#arrow)");
                                arrowMarker.attr("markerWidth", "12").attr("markerHeight", "12");
                                //显示连接线上的文字
                                edges_text.style("fill-opacity",function(edge){
                                    if( edge.source === d || edge.target === d ){
                                        return 1.0;}
                                    });
                            })
                            .on("mouseout", function(d, i){
                                //隐去箭头 --- 设置箭头大小为零
                                arrowMarker.attr("markerWidth", "0").attr("markerHeight", "0");
                                //隐去连接线上的文字
                                edges_text.style("fill-opacity", function(edge){
                                    if( edge.source === d || edge.target === d ){
                                        return 0.0;
                                    }
                                });
                            })
                            .call(force.drag);  //使得节点能够拖动
        // 标记鼠标悬停的标签
        svg_nodes.append("title")
        .text(function(d) {return d.name; });

        //添加描述节点的文字
        var svg_texts = svg.selectAll(".nodetext")
                            .data(nodes)
                            .enter()
                            .append("text")
                            //.attr("dy",".3em")
                            .attr("class","nodetext")
                            //.attr("dx", -20)
                            //.attr("dy", 20)
                            //.style("fill", "black")
                            .style("text-anchor","middle")
                            .text(function(d){
                                return d.name;
                            });

        //拖拽顶点设定为固定
        var drag = force.drag()
                        .on("dragstart",function(d,i){
                            d.fixed = true;    //拖拽开始后设定被拖拽对象为固定
                        })
        //当鼠标双击顶点时，对顶点解锁
        svg_nodes.on("dblclick",function(d,i){
                                    d.fixed = false;
                                })
        force.on("tick", function(){    //对于每一个时间间隔

             //限制结点的边界
             nodes.forEach(function(d,i){
                d.x = d.x - 30 < 0 ? 30 : d.x ;
                d.x = d.x + 30/2 > width ? width - 30 : d.x ;
                d.y = d.y - 30/2 < 0 ? 30 : d.y ;
                d.y = d.y + 30/2 + 20 > height ? height - 30 - 20 : d.y ;
             });

             //更新连线坐标
             svg_edges.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; });
             //更新连接线上文字的位置
             edges_text.attr("x",function(d){ return (d.source.x + d.target.x) / 2 ; });
             edges_text.attr("y",function(d){ return (d.source.y + d.target.y) / 2 ; });

             //更新节点坐标
             svg_nodes.attr("cx",function(d){ return d.x; })
                    .attr("cy",function(d){ return d.y; });

             //更新文字坐标
             svg_texts.attr("x", function(d){ return d.x; })
                .attr("y", function(d){ return d.y; });
        });

        </script>  

    </body>  
</html>