文档章节

d3js关于力导向图

开源中国段子手
 开源中国段子手
发布于 2016/04/25 08:55
字数 407
阅读 612
收藏 0

关于d3js的力导向图说明

<html>  
  <head>  
        <meta charset="utf-8">  
        <title>力导向图</title>  
  </head> 

<style>


</style>
    <body>  
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
        <script>           
                       
        var nodes = [ { name: "桂林"    }, { name: "广州" },
                      { name: "厦门"    }, { name: "杭州"   },
                      { name: "上海"   }, { name: "青岛"    },
                      { name: "天津"    } ];
                     
        var edges = [  { source : 0  , target: 1 } , { source : 0  , target: 2 } ,
                       { source : 0  , target: 3 } , { source : 1  , target: 4 } ,
                       { source : 1  , target: 5 } , { source : 1  , target: 6 }  ];    
                       
        //其中nodes表示的是结点nodes,表示图中的所有的点,edges表示的是边,在d3js中用数组表示,其中source:target表示的是两个点的连线。比如source:0,target:1表示的就是
        //桂林到广州的连线。如此类推。
        
        var width = 1200;
        var height = 500;
        
        
        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(200)    //指定连线长度
                .charge(-500);    //相互之间的作用力

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

        console.log(nodes);
        console.log(edges);
        
        //添加连线        
        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.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>


© 著作权归作者所有

上一篇: d3js关于弦图
下一篇: d3js几个常用布局
开源中国段子手
粉丝 44
博文 178
码字总数 95519
作品 0
南京
程序员
私信 提问
d3js 力导向图的数据处理问题

view-source:http://mbostock.github.io/d3/talk/20111116/flare.json 类似这种d3js 力导向图的数据是如何生成的呢?是原作者一个个敲出来的吗?如果从数据库取数据如何生成这种格式的json数...

酱油白
2016/12/15
412
0
d3js几个常用布局

Bundle —- 捆图 Chord —- 弦图 Cluster —- 集群图 Force —- 力学图、力导向图 Histogram —- 直方图(数据分布图) Pack —- 打包图 Partition —- 分区图 Pie —- 饼状图 Stack —- 堆栈...

开源中国段子手
2016/04/19
45
0
关于力导向图显示复杂网络关系划分结果

@Kener-林峰 你好,想跟你请教个问题: 我想利用Echarts的力导向图展示复杂网络划分的结果,节点有20W+,边80W+,但是我在显示一个社团的时候,显示画面就出现卡了(社团有1w个节点),所以我...

守着四星期
2014/08/04
2.4K
2
D3.js的v5版本入门教程(第十四章)—— 力导向图

D3.js的v5版本入门教程(第十四章) 这一章我们来绘制一个力导向图,什么叫力导向图,通俗一点将就是有节点和线组成,当鼠标拖拽一个节点时,其他节点都会受到影响(力导向图有多种类型,本章...

qq_34414916
2018/04/23
0
0
echarts力导向布局图,格式化标签

@Kener-林峰 你好,想跟你请教个问题: 力导向布局图里option->series->itemStyle->normal->label 这个label里面的formatter属性真的设置了,没有用。 饼图的我试过,可以格式化标签,但是力...

永恒景美
2014/05/28
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
昨天
64
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
昨天
26
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
昨天
43
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
昨天
27
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
昨天
44
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部