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. n阶楼梯，一次走1,2,3步，求多少种不同走法

    ##已知n阶楼梯,一次可以迈1,2,3步.求所有走法## 如果要列出走法,时间复杂度太高,O(n)=2**n,前两个函数遍历走法.## 如果只是单纯列出走法数量,就简单多了,也但是很容易内存爆表. # ...

  2. L1-057 PTA使我精神焕发

    以上是湖北经济学院同学的大作.本题就请你用汉语拼音输出这句话. 输入格式: 本题没有输入. 输出格式: 在一行中按照样例输出,以惊叹号结尾. 输入样例: 无 输出样例: PTA shi3 wo3 ji ...

  3. ipone 5s上，字体rem遇到的问题

    webapp中,12px的字体,利用rem实现自适应布局, 发现只有在ipone 5s中字体超大, 这两个class元素中字体一样大小,发现上面元素字体在ipone 5s中很大, 后来验证问题在哪里, ...

  4. 第二章：深入分析java I/O的工作机制

    .2.1 java的I/O类库的基本架构 I/O的机器获取和交换信息的主要渠道,在当今数据大爆炸时代,I/O问题尤其突出,很容易成为一个性能瓶颈,Java在I/O上也一直做持续的优化,现在也引入了NI ...

  5. [Ajax] 如何使用Ajax传递多个复选框的值

    HTML+JavaScript代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  6. L2-024. 部落（并查集）*

    L2-024. 部落 参考博客 #include<cstdio> #include<iostream> #include<set> #include<algo ...

  7. 自动化测试-13.selenium执行JS处理滚动条

    前言 selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了. 常见场景: 当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的. 这时候 ...

  8. java.lang.ClassNotFoundException的解决方法

    java.lang.ClassNotFoundException的解决方法   出现这个问题的原因可能很多,但是最终原因都是部署的项目文件中没有这个类包. 那么出错的点在哪呢?逐一排除! 1.首先在项 ...

  9. jquery中filter的用法

    一.filter的参数类型可分为两种 1.传递选择器 $('a').filter('.external') 2.传递过滤函数 $('a').filter(function(index) {       ...

  10. JS效果

    多标签页效果 tab切换 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset ...