<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>力向导图</title>

     <style type="text/css">

         .good {

             font-size: 10px;

         }

         svg {

             display: block;

             width: 800px;

             height: 800px;

             margin: 100px auto;

         }

     </style>

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

 </head>

 <body>

 <svg></svg>

 <script type="text/javascript">

     var nodes = [{name: "桂林"}, {name: "广州"},

         {name: "厦门"}, {name: "杭州"},

         {name: "上海"}, {name: "青岛"},

         {name: "天津"}];

     var edges = [

         {source: 0, target: 1}, {source: 0, target: 2},

         {source: 0, target: 3}, {source: 0, target: 4},

         {source: 0, target: 5}, {source:0, target: 6}];

     var force = d3.layout.force()

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

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

         .size(['800', '600']) //指定作用域范围

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

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

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

     console.log(nodes)//转换后的数据

     console.log(edges)//转换后的数据

     var svg = d3.select('svg')

     // 绘制连接线

     var svg_edges = svg.selectAll('line')

         .data(edges)

         .enter()

         .append('line')

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

         .style('stroke-width', 1)

     var color = d3.scale.category20()

     // 添加节点

     var svg_nodes = svg.selectAll('circle')

         .data(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里面的tick时间，每进行到一个时刻都要调用它，监听事件写在这里面就好

     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>

d3实现的力向导图的更多相关文章

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

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

  2. 用Echarts的力向导图可视化数据

    学习背景:做一个图论的题目的时候需要将结果可视化来直观的看效果,所以使用Echarts来画.感觉效果不错. Echarts下载地址:https://echarts.baidu.com/download ...

  3. D3.js：力导向图

    var nodes = [ { name: "桂林" }, { name: "广州" }, { name: "厦门" }, { name: ...

  4. D3.js force力导向图用指定的字段确定link的source和target，默认是索引

    json.links.forEach(function (e) { var sourceNode = json.nodes.filter(function (n) { return n.name == ...

  5. D3力布图绘制--节点间的多条关系连接线的方法（转）

    在项目中遇到这样的场景,在使用D3.js绘制力布图的过程中,需要在2个节点间绘制多条连接线,找到一个不错的算法,在此分享下. 效果图: HTML中要连接 <!DOCTYPE html> & ...

  6. D3力布图绘制--基本方法

    本文主要结合案例记录使用D3.js绘制力布图的基本方法 样例显示 基本配置 this.force = d3.layout .force() .size([this.width, this.height ...

  7. D3.js 力导向图

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

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

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

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

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

随机推荐

  1. js获取当前用户IP地址和城市

    引用下面的js: <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> 直接获取IP和城 ...

  2. SSID 已经一个路由器设多个SSID

    SSID(Service Set Identifier)   SSID,AP唯一的ID码,许多人认为可以将SSID写成ESSID,其实不然,SSID是个笼统的概念,包含了ESSID和BSSID,用来区 ...

  3. Luogu3163 [CQOI2014]危桥 ---- 网络流 及 一个细节的解释

    Luogu3163 [CQOI2014]危桥 题意 有$n$个点和$m$条边,有些边可以无限次数的走,有些边这辈子只能走两次,给定两个起点和终点$a_1 --> a_2$(起点 --> 终 ...

  4. BZOJ.4319.[cerc2008]Suffix reconstruction(后缀数组 构造 贪心)

    题目链接 \(Description\) 给定SA数组,求满足SA[]的一个原字符串(每个字符为小写字母),无解输出-1. \(Solution\) 假设我们现在有suf(SA[j]),要构造suf( ...

  5. jQuery UI练习

    jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互.特效.小部件及主题.无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery ...

  6. Java内存区域与内存溢出异常--运行时数据区

    Java与C之间有一堵由内存动态分配和垃圾收集技术所围成的“高墙”. C.C++程序开发在内存管理区域,既拥有每一个对象的“所有权”,又担负着每一个对象声明开始到终结的责任,而Java在虚拟机自动管理 ...

  7. git 先创建远程库后克隆到本地

    前面学习了先有本地库,后有远程库的时候,如何关联远程库. 现在,假设我们从零开发,那么最好的方式是先创建远程库,然后,从远程库克隆. 首先,登陆GitHub,创建一个新的仓库,名字叫gitskills ...

  8. 轻松学C#----第二篇笔记

    第二篇: 分析下第一篇的代码,见下图: 2.同其他语言一样,C#语言在编写时也遵守一定的语法规范. A.标识符(identify):指为方法.变量.其他任何用户自定义项指定的名称.标识符必须遵循一定的 ...

  9. C#高级编程9 第17章 使用VS2013-C#特性

    C#高级编程9 第17章 使用VS2013 编辑定位到 如果默认勾选了这项,请去掉勾选,因为勾选之后解决方案的目录会根据当前文件选中. 可以设置项目并行生成数 版本控制软件设置 所有文本编辑器行号显示 ...

  10. 19 个必须知道的 Visual Studio 快捷键

    项目相关的快捷键 Ctrl + Shift + B = 生成项目 Ctrl + Alt + L = 显示Solution Explorer(解决方案资源管理器) Shift + Alt+ C = 添加 ...