<!-- pie example -->

<!DOCTYPE html>

<meta charset="utf-8">

<style>

</style>

<body>

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

<script>

var dataset = {

        nodes: [

          { name: "Adam" },

          { name: "Bob" },

          { name: "Carrie" },

          { name: "Donovan" },

          { name: "Edward" },

          { name: "Felicity" },

          { name: "George" },

          { name: "Hannah" },

          { name: "Iris" },

          { name: "Jerry" }

        ],

        edges: [

          { source: 0, target: 1 },

          { source: 0, target: 2 },

          { source: 0, target: 3 },

          { source: 0, target: 4 },

          { source: 1, target: 5 },

          { source: 2, target: 5 },

          { source: 2, target: 5 },

          { source: 3, target: 4 },

          { source: 5, target: 8 },

          { source: 5, target: 9 },

          { source: 6, target: 7 },

          { source: 7, target: 8 },

          { source: 8, target: 9 }

        ]

      };

var colors=d3.scale.category10();

var w=300,h=300;

var svg=d3.select('body')

          .append('svg')

          .attr({

            'width':w

            ,'height':h

          })

var force=d3.layout.force()

                   .nodes(dataset.nodes)

                   .links(dataset.edges)

                   .size([w,h])

                   .linkDistance([50])

                   .charge([-500])

                   .start()

                   ;

var edges=svg.selectAll('line')

             .data(dataset.edges)

             .enter()

             .append('line')

             .style({

              'stroke':'#ccc'

              ,'stroke-width':1

             })

             ;

var nodes=svg.selectAll('circle')

             .data(dataset.nodes)

             .enter()

             .append('circle')

             .attr('r',10)   // 这里要设置半径

             .style({

              'fill':function(d,i){

                return colors(i);

                }

             })

             .call(force.drag)

             ;

force.on('tick',function(){

  edges.attr({

    'x1':function(d){

      return d.source.x;

    }

    ,'y1':function(d){

      return d.source.y;

    }

    ,'x2':function(d){

      return d.target.x;//这里要变为target

    }

    ,'y2':function(d){

      return d.target.y;

    }

  })

  ;

  nodes.attr({

    'cx':function(d){

      return d.x;

    }

    ,'cy':function(d){

      return d.y;

    }

  })

})

</script>

node是动态的。

D3_book 11.3 force的更多相关文章

  1. D3_book 11.2 stack

    <!-- book :interactive data visualization for the web 11.2 stack 一个堆叠图的例子 --> <!DOCTYPE htm ...

  2. D3_book 11.1 pie

    <!-- pie example --> <!DOCTYPE html> <meta charset="utf-8"> <style> ...

  3. 【整理】Linux下中文检索引擎coreseek4安装，以及PHP使用sphinx的三种方式(sphinxapi，sphinx的php扩展，SphinxSe作为mysql存储引擎)

          一,软件准备 coreseek4.1 (包含coreseek测试版和mmseg最新版本,以及测试数据包[内置中文分词与搜索.单字切分.mysql数据源.python数据源.RT实时索引等测 ...

  4. python瓦登尔湖词频统计

    #瓦登尔湖词频统计: import string path = 'D:/python3/Walden.txt' with open(path,'r',encoding= 'utf-8') as tex ...

  5. 移动端触摸（touch）事件

    移动端时代已经到来,作为前端开发的我们没有理由也不应该坐井观天,而是勇敢地跳出心里的那口井,去拥抱蔚蓝的天空.该来的总会来,我们要做的就是接受未知的挑战.正如你所看到的,这是一篇关于移动端触摸事件的文 ...

  6. 地区sql

    /*Navicat MySQL Data Transfer Source Server : localhostSource Server Version : 50136Source Host : lo ...

  7. 【Unity】11.6 恒定力 (Constant Force)

    分类:Unity.C#.VS2015 创建日期:2016-05-02 一.简介 恒定力 (Constant Force) 是用于向刚体 (Rigidbody) 添加恒定力的快速实用工具,适用于类似火箭 ...

  8. RHEL6.5安装11.2.0.3 RAC并打补丁

    [TOC] 一,主机配置 1.修改hosts文件(两节点) #127.0.0.1 localhost localhost.localdomain localhost4 localhost4.local ...

  9. phpize 扩展GD库 安装 ！ 环境--centos 7 +nginx 1.7.11+php 5.6.7

    使用phpize编译GD库安装,先安装前置库libjpeg libpng zlib  freetype等 都是下面php编译的几个选项 先看php编译的选项: --with-gd=DIR       ...

随机推荐

  1. 用NBU无法还原数据库到ASM磁盘

    描述:用NBU无法还原数据库到ASM磁盘,却可以还原到数据库本地磁盘 错误提示: ORA-15025: could not open disk "/dev/mapper/DATA1" ...

  2. java &&与||短路的详解

    短路运算符就是我们常用的“&&”.“||”,一般称为“条件操作”. class Logic{    public ststic void main(String[] args){    ...

  3. python简单基础代码

    1.从键盘输入两个数,并计算A的B次幂:number1=raw_input('input number1:')number2=raw_input('input number2:')print 'num ...

  4. SVN客户端的安装和使用

    ----------------------siwuxie095 SVN 客户端的安装 1.SVN 客户端,选择 TortoiseSVN,下载链接: https://tortoisesvn.net/d ...

  5. 转---tcp三次握手四次挥手syn fin......

    http://blog.chinaunix.net/uid-22312037-id-3575121.html转自 一.TCP报文格式        TCP/IP协议的详细信息参看<TCP/IP协 ...

  6. MySQL中执行sql语句错误 Error Code: 1093. You can't specify target table 'car' for update in FROM clause

    MySQL中执行sql语句错误 Error Code: 1093. You can't specify target table 'car' for update in FROM clause 201 ...

  7. access数据库收缩（压缩）

    一般是因为表中有大量没用的数据,把没用的数据全部删除 菜单栏的“工具”——“数据库实用工具”——“压缩和修复数据库” OK啦

  8. 10-多写一个@Autowired导致程序崩了

    再是javaweb实验六中,是让我们改代码,让它跑起来,结果我少注释了一个,导致一直报错,检查许久没有找到,最后通过代码替换逐步查找,才发现问题.

  9. EditTex

    <EditText android:layout_width="match_parent" android:layout_height="100dp" a ...

  10. oralce 存储过程、函数和触发器

    一.存储过程和存储函数 指存储在数据库中供所有用户程序调用的子程序叫存储过程.存储函数.   创建存储过程 用CREATE PROCEDURE命令建立存储过程. 语法: create [or repl ...