<!-- 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. 3.3 JSP内置对象概述

    1.request 1.1 request获取页面传来的参数,参数通过浏览器网址和后面添加?的方式传达. 传参:”show.jsp?id=001” 获取参数:request.getParameter( ...

  2. keras、 tensor flow 教程

    [keras]http://keras-cn.readthedocs.io/en/latest/getting_started/concepts/,[tensorflow] http://blog.c ...

  3. jquery clone 获取文本框值得问题

    1 clone 出来的文本框 默认不会把原来的事件也带过去 如果使用 $("#").clone(true);   true  可以将原来的事件带过去 获取文本框的值 可以使用事件 ...

  4. Node.js的知识点框架整理

    背景:因为appium是基于Node.js的,所以想看一下Node.js.但是发现很多资料的顺序看起来有点颠倒.然后就一面看资料一面整理了一下大概的知识点框架,希望对自己对别人有用. 本文不包含nod ...

  5. JPA调用函数

    criteriaBuilder.function("udf_get_cc_userright", Integer.class, criteriaBuilder.literal(se ...

  6. luoguP3366 [模板] 最小生成树

    题目链接:https://www.luogu.org/problemnew/show/P3366 思路: 求最小生成树的模板题,求MST有两种算法——Prim.Kruskal. 两者区别:Prim在稠 ...

  7. 解决安装Apache中出现checking for APR... no configure: error: APR not found. Please read the documentation的问题

    Linux中安装Apache 编译出现问题: 解决办法: 1.下载所需要的软件包 wget http://archive.apache.org/dist/apr/apr-1.4.5.tar.gz wg ...

  8. 无法访问部署在linux上的Tomcat服务器解决方案

    笔者使用环境:CentOS 6.4  Windows7  tomcat7 主要原因是linux开启了防火墙,有两种解决方案,一种是关闭防火墙,另外一种是开放所要访问的端口 1.关闭防火墙(非常不建议) ...

  9. [SoapUI] 获取当前时间包括年月日时分秒来作为命名

    import java.text.SimpleDateFormat GregorianCalendar calendar = new GregorianCalendar() def dateForma ...

  10. jar 包 的用处 ，dozer、poi、itext 、jxl 、jbarcode 、itextrenderer jquery 效果

    1.dozer 做类型转换的, 新建 xml 文件 描述两个实体的对应关系 ,DozerBeanMapper mapper =new DozerBeanMapper().addMappingFiles ...