<!-- 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. Nunit与Vs 2012配合使用

    要使用Nunit首先要去官网 http://www.nunit.org/ 下载Nunit.win  .msi是安装版.   bin  .zip是绿色版. 下载完后安装. 在 VS2012 中使用 Nu ...

  2. pyplot绘图区域

    pyplot绘图区域 Matplotlib图像组成 matplotlib中,整个图像为一个Figure对象,与用户交互的整个窗口 Figure对象中包含一个或多个Axes(ax)子对象,每个ax子对象 ...

  3. windows本地blast

    详细可参考https://www.jianshu.com/p/2f125cdf8262:https://blog.csdn.net/qq_34296043/article/details/544277 ...

  4. EasyUI多选的获取

    function deletePRE() { var rows = $('#dg').datagrid('getSelections'); var ids = []; var other_ids = ...

  5. 视图的URL配置，找不到我设置的第一个Page

    问题:视图的URL配置,找不到我设置的第一个Page 我的代码如下: 结果访问/test/时说找不到这个page   原因:patterns方法的参数有两个,一个是prefix,一个是参数元祖,详见下 ...

  6. hdoj1078（介绍记忆化搜索及其模板）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1078 思路: 这是一道典型的记忆化搜索模板题. 先介绍记忆化搜索,本质是搜索+DP. 一般说来,动态规 ...

  7. sibling

    sibling 英 ['sɪblɪŋ] 美 ['sɪblɪŋ] 名词. 兄,弟,姐,妹网络. 兄弟,兄弟姐妹,同胞变形. 复数:siblings

  8. maven不存在jar包解决

    win7环境 下载:https://maven.apache.org/download.cgi 提取文件,并cmd 转到bin目录 假设要添加的jar包是jbarcode-0.2.8.jar, 可执行 ...

  9. struts框架总结

    1.struts2框架开发的过程:先导包,再写配置(写struts.xml配置,还有在web.xml中进行过滤器的配置,过滤器的配置一定不能少) 2.struts框架是前端web层的框架.主要的特点: ...

  10. 配置springMVC

    1.web.xml 前端控制器 配置规则:*.do: 拦截请求路径所有的后缀为.do;/* : 拦截所有, .jsp页面也会拦截; 不会使用此配置, 因为视图会无法跳转;/ : 拦截所有, .jsp页 ...