<html>

  <head>

        <meta charset="utf-8">

        <title>力导向图</title>

        <style>

            .links line {

              stroke: #999;

              stroke-opacity: 0.6;

            }

            .nodes circle {

              stroke: #fff;

              stroke-width: 1.5px;

            }

            </style>

  </head> 

    <body>

        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

        <script>           

        var nodes = [

            { name: "虚拟助理APP",group:1    },

               { name: "桥梁结构",group:1    },

                  { name: "钢桁梁",group:1  },

                        { name: "上弦杆",group:1  },

                        { name: "下弦杆",group:1  },

                        { name: "桥面系",group:1  },

                        { name: "支座",group:1  },

                        { name: "声屏障",group:1  },

                        { name: "螺栓",group:1  },

                            { name: "螺栓病害",group:1  },

                                    { name: "折断",group:1  },

                                    { name: " 缺失",group:1  },

                                    { name: " 其他",group:1  },

                            { name: "螺栓养护",group:1  },

                                    { name: "涂装",group:1  },

                                    { name: "补拧",group:1  },

                                    { name: "除锈",group:1  },

                            { name: "螺栓维修",group:1  },

                                    { name: "更换",group:1  },

                                    { name: "补拧",group:1  },

                    { name: "斜拉桥",group:1  },

                    { name: "悬索桥",group:1  },

                    { name: "系杆拱",group:1  }

                 ];

        var edges = [

             { source : 0  , target: 1 } ,

               { source : 1  , target: 2 } ,

                { source : 2  , target: 3 },

                    { source : 2  , target: 4 },

                    { source : 2  , target: 5 },

                    { source : 2  , target: 6 },

                    { source : 2  , target: 7 },

                    { source : 2  , target: 8 },

                        { source : 8  , target: 9 },

                        { source : 9  , target: 10 },

                        { source : 9  , target: 11 },

                        { source : 9  , target: 12 },

                        { source : 8  , target: 13 },

                        { source : 13  , target: 14 },

                        { source : 13  , target: 15 },

                        { source : 13  , target: 16 },

                        { source : 8  , target: 17 },

                        { source : 17  , target: 18 },

                        { source : 17  , target: 19 },

                { source : 1  , target: 20 } ,

                { source : 1  , target: 21 } ,

                { source : 1  , target: 22 }

                ];    

        var width = 1000;

        var height =1000;

        var svg = d3.select("body")

                    .append("svg")

                    .attr("width",width)

                    .attr("height",height);

        var force = d3.layout.force()

                .nodes(nodes)        //指定节点数组

                .links(edges)        //指定连线数组

                .size([width,height])    //指定范围

                .linkDistance(150)    //指定连线长度

                .charge(-400);    //相互之间的作用力

        force.start();    //开始作用

        console.log(nodes);

        console.log(edges);

        //添加连线

        var svg_edges = svg.selectAll("line")

                            .data(edges)

                            .attr("class", "links")

                            .enter()

                            .append("line")

                            .style("stroke","#ccc")

                            .style("stroke-width",1);

        var color = d3.scale.category20();

        //添加节点

        var svg_nodes = svg.selectAll("circle")

                            .data(nodes)

                            .attr("class", "nodes")

                            .enter()

                            .append("circle")

                            .attr("r",20)

                            .style("fill",function(d,i){

                                return color(i);

                            })

                            .call(force.drag);    //使得节点能够拖动

        //添加描述节点的文字

        var svg_texts = svg.selectAll("text")

                            .data(nodes)

                            .enter()

                            .append("text")

                            .style("fill", "black")

                            .attr("dx", 20)

                            .attr("dy", 8)

                            .text(function(d){

                                return d.name;

                            });

        force.on("tick", function(){    //对于每一个时间间隔

             //更新连线坐标

             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; });

             //更新节点坐标

             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>

力导向图Demo的更多相关文章

  1. Vue和d3.js(v4)力导向图force结合使用，v3版本升级v4【一】

    前段时间因为参与项目涉密,所以一直没有更新博客,有些博友给我私信或者留言要部分博文的源码,因为我的电脑更换,demo的源码没有备份 所以无法提供.大家可针对具体问题问我,有空我定会回复的.另外转发文章 ...

  2. D3.js 力导向图

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

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

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

  4. d3.js（v5.7）力导向图（关系图谱）

    先上图,后面再一一解释: ok,为了方便理解,这里我就没有用之前封装的automatch函数来将数据和节点匹配了,如果你对enter(),exit()函数还不是很理解的话,请移步至我之前写的<n ...

  5. D3.js系列——布局：饼状图和力导向图

    一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...

  6. 使用百度Echarts制作力导向图

    最近项目需求制作一个力导向图来展示企业的画像等关系信息,故想到了百度Echarts的关系图,在这使用Echarts3.0版本来实现.先上效果图,再看代吗 哎,本来想整个工程扔出来,发现好像没地方上传附 ...

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

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

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

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

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

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

随机推荐

  1. POJ1700----Crossing River

    #include<cstdio> #include<iostream> #include<cstring> #include<algorithm> us ...

  2. java菜鸟之微信分享

    前言:我终于理解了什么叫做教科书:教科书就是把一些简单容易的知识写成一堆谁都看不懂的书,这,就简称“教科书” 这些天接触到微信分享以及回调的问题,因为之前没接触过,所以这次做这个分享,碰了一点点壁,特 ...

  3. BZOJ.1210.[HNOI2004]邮递员(插头DP Hash 高精)

    BZOJ 洛谷 http://www.cnblogs.com/LadyLex/p/7326874.html 插头DP.\(m+1\)个插头的状态需要用三进制表示:\(0\)表示无插头,\(1\)表示是 ...

  4. MySql基础笔记（一）Mysql快速入门

    Mysql快速入门 一)基本概念 1)表 行被称为记录,是组织数据的单位.列被称为字段,每一列表示记录的一个属性. 2)主键 主键用于唯一的标识表中的每一条记录.可以定义表中的一列或者多列为主键, 但 ...

  5. windows提交代码到git仓库

    进入git bash git config --global user.name '仓库名' git config --global user.email '2531099@163.com' git ...

  6. idea快捷键列表

    Ctrl+Shift + Enter,语句完成 “!”,否定完成,输入表达式时按 “!”键 Ctrl+E,最近的文件 Ctrl+Shift+E,最近更改的文件 Shift+Click,可以关闭文件 C ...

  7. JS膏集04

    JS膏集04 1.apply和call方法 可以改变this的指向,可以用于函数的调用 apply和call方法中如果没有传入参数,或者传入null,那么调用该方法的函数中的this就是window ...

  8. 开源流媒体服务器SRS学习笔记(2) - rtmp / http-flv / hls 协议配置 及跨域问题

    对rtmp/http-flv/hls这三种协议不熟悉的同学,强烈建议先看看网友写的这篇文章科普下:理解RTMP.HttpFlv和HLS的正确姿势 .   srs可以同时支持这3种协议,只要修改conf ...

  9. pygame 笔记-5 模块化&加入敌人

    上一节,已经用OOP方法,把几个类抽象出来了,但是都集中在一个.py文件中,代码显得很冗长,这一节复用模块化的思想,把这个大文件拆分成几个小文件: 先把主角Player单独放到一个文件player.p ...

  10. C# GDI+之Graphics类 z

    GDI+是GDI的后继者,它是.NET Framework为操作图形提供的应用程序编程接口,主要用在窗体上绘制各种图形图像,可以用于绘制各种数据图像.数学仿真等. Graphics类是GDI+的核心, ...