http://www.ourd3js.com/wordpress/?p=196

http://www.ourd3js.com/demo/rm/R-9.2/force.html　　力导向图（那个可以拖拽的多个小球）　　2016-2-19

http://www.ourd3js.com/wordpress/396/　　D3.js 入门系列　　2018-1-31

http://www.ourd3js.com/wordpress/

http://huiyi.csdn.net/activity/product/goods_list?project_id=2660

http://www.ourd3js.com/wordpress/?p=147　　水流模拟

<script src="https://cdn.bootcss.com/d3/4.11.0/d3.min.js"></script>

<script src="https://cdn.bootcss.com/d3/3.5.17/d3.min.js"></script>

一个例子：

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8">

<meta http-equiv="Pragma" content="no-cache">

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript" src="https://cdn.bootcss.com/d3/3.5.17/d3.min.js"></script>

<script type="text/javascript">

$(function(){

var svg = d3.select("#paint_svg");

var width = svg.attr("width");

var height = svg.attr("height");

var title = svg.append("text")

                .attr("class","titleText")

                .attr("x", 30)

                .attr("y", 30)

                .text("拖着玩...")

//1.确定初始数据

var nodes = [ { name:"专题站"},

{ name:"D3入门"},

{ name:"D3进阶"},

{ name:"D3高级"},

{ name:"D3视频"},

{ name:"JSON"},

{ name:"D3地图"},

{ name:"可视化"},

{ name:"随笔"}

];

/*

var edges = [  { source:0, target:1} ,

               { source:1, target:2} ,

               { source:2, target:3} ,

               { source:0, target:4} ,

               { source:0, target:5} ,

               { source:1, target:6} ,

               { source:0, target:7} ,

               { source:0, target:8} ];

*/

var edges = [  { source:0, target:1} ,

               { source:0, target:2} ,

               { source:0, target:3} ,

               { source:0, target:4} ,

               { source:0, target:5} ,

               { source:0, target:6} ,

               { source:0, target:7} ,

               { source:0, target:8} ];

//2.转换数据

var force = d3.layout.force()

                    .nodes(nodes)    //设定顶点数组

                    .links(edges)    //设定边数组

                    .size([width,height])    //设定作用范围

                    .linkDistance(150)    //设定边的距离

                    .charge(-400);    //设定顶点的电荷数

force.start();    //开启布局计算

console.log(nodes);    //输出转换后的数据

console.log(edges);

//3.绘制

var color = d3.scale.category20();

//绘制连线

var lines = svg.selectAll(".forceLine")

                    .data(edges)

                    .enter()

                    .append("line")

                    .attr("class","forceLine");

//绘制节点

var circles = svg.selectAll(".forceCircle")

                    .data(nodes)

                    .enter()

                    .append("circle")

                    .attr("class","forceCircle")

                    .attr("r",35)

                    .style("fill",function(d,i){

                        return color(i);

                    })

                    .call(force.drag);

//绘制文字

var texts = svg.selectAll(".forceText")

                    .data(nodes)

                    .enter()

                    .append("text")

                    .attr("class","forceText")

                    .attr("x",function(d){ return d.x; })

                    .attr("y",function(d){ return d.y; })

                    .attr("dy", ".3em")

                    .text(function(d){ return d.name; });

//tick事件的监听器

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

     //更新连线的端点坐标

     lines.attr("x1",function(d){ return d.source.x; });

     lines.attr("y1",function(d){ return d.source.y; });

     lines.attr("x2",function(d){ return d.target.x; });

     lines.attr("y2",function(d){ return d.target.y; });

     //更新节点坐标

     circles.attr("cx",function(d){ return d.x; });

     circles.attr("cy",function(d){ return d.y; });

     //更新节点文字的坐标

     texts.attr("x",function(d){ return d.x; });

     texts.attr("y",function(d){ return d.y; });

});

//力学图运动开始时

force.on("start", function(){

    console.log("运动开始");

});

//力学图运动结束时

force.on("end", function(){

    console.log("运动结束");

});

});

</script>

<style type="text/css">

.forceLine {stroke: #444;stroke-width: 2;}

.forceText {fill: black;text-anchor: middle;font-size: 20;font-family: simhei;}

</style>

</head>

<body>

<h2>http://www.ourd3js.com</h2>

<div class="painting">

    <svg id="paint_svg" width="1190" height="800"></svg>

</div>

</body>

</html>

...

学习：D3的更多相关文章

  1. D3.js学习（一）

    从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...

  2. 【D3】D3学习轨迹-----学习到一定层度了再更新

    1.  首先了解SVG的基本元素 http://www.w3school.com.cn/svg/ 2.  了解d3的专有名词  http://www.cnblogs.com/huxiaoyun90/p ...

  3. d3.js入门学习

    个人感觉前端数据可视化是个趋势,并且现在所在公司也是有做这块的项目,虽然我目前还没有接触到公司数据可视化的项目,但是,今后总是要接触的嘛. 今天看了一下公司目前所用的两种数据可视化工具---D3和EC ...

  4. d3.js学习笔记（五）——将数据结构化为D3.js可处理的

    目标 在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js. 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优 ...

  5. D3.js学习笔记（一）——DOM上的数据绑定

    开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...

  6. D3学习之：D3.js中的12中地图投影方式

    特别感谢:1.[张天旭]的D3API汉化说明.已被引用到官方站点: 2.[馒头华华]提供的ourd3js.com上提供的学习系列教程,让我们这些新人起码有了一个方向. 不得不说,学习国外的新技术真的是 ...

  7. 使用D3绘制图表（7）--饼状图

    这次是绘制饼状图,也是这一次使用D3绘制图表的最后一篇,大家可以从其他地方深入学习D3绘制图表,也可以直接查看D3的API进行学习,本次绘制饼状图的数据跟之前的卸载数组里面的不一样,这一次是使用d3的 ...

  8. D3.js 简介和安装

    一.What´s D3.js D3.js是一种数据操作类型的javascript库(也可视其为插件):结合HTML,SVG和CSS,D3可以图形化的,生动的展现数据. D3 的全称是(Data-Dri ...

  9. 【 D3.js 入门系列 --- 0 】 简介和安装

    D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...

  10. d3.js入门1：安装配置

    D3 是当前流行的数据可视化工具,通过本文能有对 D3 有一个初步认识. 1. D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名 ...

随机推荐

  1. C++ 抽象类与接口

    1. 抽象类  在面向对象编程中,抽象类是一种只能定义类型,不能生成对象的类,它是对一系列看上去不同,但是本质相同的具体概念的抽象.最典型的的抽象类就是”图形”,三角形.矩形.梯形都是图形,它们都具有 ...

  2. python笔记8-列表list操作、多维数组

    #!/usr/bin/python #python里面有个这个话,代表在linux下运行的时候#去哪个目录下找python的解释器,在windows上运行不用写# coding:utf-8# __*_ ...

  3. django 简易版搭建

    1.根目录下创建mysql.cnf文件 [client]database = identimguser = rootpassword = roothost = 127.0.0.1port = 3306 ...

  4. ios MQTT协议的实际应用

    1,创建单视图项目,pod search mqtt找到一个库,然后在项目目录下pod init 出Podfile 2,pod install 安装mqtt库 3,主要代码: #import " ...

  5. 洛谷 P1763 状态压缩dp+容斥原理

    (题目来自洛谷oj) 一天,maze决定对自己的一块n*m的土地进行修建.他希望这块土地共n*m个格子的高度分别是1,2,3,...,n*m-1,n*m.maze又希望能将这一些格子中的某一些拿来建蓄 ...

  6. 使用 JavaScript 截屏

    经常在微博上看到很多内容使用的什么长微博截图,并且截图上还附加了很多其他的信息.之前对纯前端截图有些研究,正好本博客有这个需求,今天就把这东西实现了下. 需要声明的是,JavaScript 目前还不能 ...

  7. 面向对象的编程思想和Java中类的概念与设计

    面向对象的编程思想学习,面向对象内容的三条主线;1.java类及类的对象2.面向对象的三大特征3.其他关键字学习内容:3.1面向对象与面向过程面向对象与面向过程在应用上的区别 Java中类的概念与设计 ...

  8. Centos6.8 编译安装Apache2.4

    cetos6.8源码安装apache2.4.29 apache官网:http://httpd.apache.org 具体安装步骤: 1 配置安装apache的基础环境2 下载想要安装的版本源码包3 解 ...

  9. Win下更新pip出现OSError:[WinError17]与PerrmissionError:[WinError5]及解决

    环境:Win7 64位,python3.6.0 我在准备用pip装东西的时候,在cmd里先更新了一下pip,大概是9.0.1更新到9.0. 尝试更新pip命令: pip install --upgra ...

  10. 运行gunicorn失败：[ERROR] Connection in use: ('0.0.0.0', 8000)

    参考:https://pdf-lib.org/Home/Details/5262 执行命令:gunicorn -w 4 -b 0.0.0.0:8000 wsgi:app,遇到如下错误: [2019-0 ...