<!-- 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. 吴裕雄 python 数据处理（2）

    import pandas as pd data = pd.read_csv("F:\\python3_pachongAndDatareduce\\data\\pandas data\\hz ...

  2. show_space查看对象空间使用情况

    CREATE OR REPLACE PROCEDURE show_space(p_segname IN VARCHAR2, p_owner IN VARCHAR2 DEFAULT USER, p_ty ...

  3. Ansible 书写我的playbook

    mysql 创建数据库 - hosts: localhost  remote_user: root  tasks: - name: test mysql    mysql_db:      name: ...

  4. springmvc后台生成验证码

    url http://localhost:8080/admin/getCode http://localhost:8080/admin/checkCode controller package com ...

  5. phpStudy4——前端页面使用Ajax请求并解析php返回的json数据

    项目需求: 在html页面显示所有用户列表信息. 需求分析: 1. html页面使用ajax向后端php请求用户数据 2. php脚本查询数据库,并将查询后的结果以json格式返回前端html页面 3 ...

  6. 安装使用phpStudy在本机配置php运行环境

    前言: php开发的初学者,强烈推荐使用phpStudy集成环境,一方面这个的确很好用(本人电脑安装了jspStudy,可以同时调试php和jsp),另一方面呢,虽然本人是技术控,但对这些繁杂的安装部 ...

  7. discuz回贴通知插件实现-插件的多语言

    如果涉及到页面的展示,模板,提示信息,通常会   1.建立好需要的文字的翻译 在disucz的data/plugindata目录创建一个插件所使用的语言文件,命名方式为: 插件标识符.lang.php ...

  8. 【原创】VB超强游戏外挂帮助类,封装了很多方法

    ''' <summary> ''' a very nice file that can be used on other projects ''' </summary> ''' ...

  9. Eclipse使用。

    1. 如何把项目部署到jetty根目录. 先部署.然后在jetty安装根目录下找到contexts,在里面找到你项目名.xml文件.打开后,把<Set name="configurat ...

  10. windows10 装linux子系统

    http://blog.csdn.net/Yuxin_Liu/article/details/52347898 试了一下,下载太慢,就没继续用,可以用实验楼这个网来玩玩linux