学习：D3

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　　水流模拟

一个例子：

<!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的更多相关文章

D3.js学习（一）
从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...
【D3】D3学习轨迹-----学习到一定层度了再更新
1. 首先了解SVG的基本元素 http://www.w3school.com.cn/svg/ 2. 了解d3的专有名词 http://www.cnblogs.com/huxiaoyun90/p ...
d3.js入门学习
个人感觉前端数据可视化是个趋势,并且现在所在公司也是有做这块的项目,虽然我目前还没有接触到公司数据可视化的项目,但是,今后总是要接触的嘛. 今天看了一下公司目前所用的两种数据可视化工具---D3和EC ...
d3.js学习笔记（五）——将数据结构化为D3.js可处理的
目标在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js. 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优 ...
D3.js学习笔记（一）——DOM上的数据绑定
开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...
D3学习之：D3.js中的12中地图投影方式
特别感谢:1.[张天旭]的D3API汉化说明.已被引用到官方站点: 2.[馒头华华]提供的ourd3js.com上提供的学习系列教程,让我们这些新人起码有了一个方向. 不得不说,学习国外的新技术真的是 ...
使用D3绘制图表（7）--饼状图
这次是绘制饼状图,也是这一次使用D3绘制图表的最后一篇,大家可以从其他地方深入学习D3绘制图表,也可以直接查看D3的API进行学习,本次绘制饼状图的数据跟之前的卸载数组里面的不一样,这一次是使用d3的 ...
D3.js 简介和安装
一.What´s D3.js D3.js是一种数据操作类型的javascript库(也可视其为插件):结合HTML,SVG和CSS,D3可以图形化的,生动的展现数据. D3 的全称是(Data-Dri ...
【 D3.js 入门系列 --- 0 】简介和安装
D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...
d3.js入门1：安装配置
D3 是当前流行的数据可视化工具,通过本文能有对 D3 有一个初步认识. 1. D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名 ...

随机推荐

长字符串换行word-break
word-break: break-all,每个字符换行 word-break: break-word按照单词换行,长字符之间换行
faker模块
faker模块中有很多函数,可以直接生成手机号,身份证号,姓名等 1.安装faker pip install faker 2.faker的使用 from faker import Faker f=Fa ...
web roadmap
企业面试题-find结合sed查找替换
题:把/oldboy目录及其子目录下所有以扩展名.sh结尾的文件中包含oldboy的字符串全部替换成oldgirl 解答: 建立测试数据: [root@tan data]# mkdir /oldboy ...
C语言gcc处理过程
gcc编译C文件一共四步,预处理(Preprocess),编译(Compilation),汇编(Assembly)和链接(Linking) 1. 预处理(Preprocess) 预处理是预处理中会展开 ...
ubuntu 安装 c语言的库函数man手册
安装 1.C语言库函数基本的帮助文档 sudo apt-get install manpages sudo apt-get install manpages-de sudo apt-get insta ...
百度前端代码规范：HTML
HTML 1.代码风格 1.1缩进与换行 [强制] 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格或 tab 字符. <style> ul { padding:; } < ...
Js高级事件冒泡
什么叫事件冒泡当给父子元素的同一事件绑定方法时,触发了子元素身上的事件,执行完毕之后,也会触发父级元素的相同事件,这种传播机制叫事件冒泡. 取消事件冒泡 Event对象有个属性叫cancelBubb ...
【自动化测试：笔记一】adb命令
1.查看当前连接的设备数 adb devices 2.连接设备 adb connect <设备名> 3.安装卸载app adb install packagesname adb unins ...
ehcache讲解及实例
ehcache讲解及实例https://www.cnblogs.com/coprince/p/5984816.html 有些情形下注解式缓存是不起作用的:同一个bean内部方法调用,子类调用父类中有缓 ...

学习：D3

学习：D3的更多相关文章

随机推荐

热门专题