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. cocos2d-x学习笔记(贪吃蛇代码)

    方向键控制蛇运动:上↑:右→:下↓:左←. 百度网盘链接:https://pan.baidu.com/s/1c1FSXaw 提取密码:u1kr

  2. Linux修改日期、时间，系统与硬件时间

    Linux的时间分为两种,硬件时间和系统时间两种: 一.查看与修改系统时间 查看系统时间:date # date Fri Nov 26 15:20:18 CST 1999 用指定的格式显示系统时间:  ...

  3. Python基础06_list

    尽量多挤点时间用来学点知识吧. list是不同于字符串的,字符串定义后不可修改,而list是可以修改的. 以下是学习笔记: #!/usr/bin/env python # coding:utf-8 l ...

  4. java面向对象编程(四)--类变量、类方法

    1.什么是类变量? 类变量是该类的所有对象共享的变量,任何一个该类的对象去访问它时,取到的都是相同的值,同样任何一个该类的对象去修改它时,修改的也是同一个变量. 如何定义类变量? 定义语法:     ...

  5. 外网如何访问web项目holer实现篇

    外网访问WEB 内网主机上安装了WEB服务器,只能在局域网内访问,怎样从公网也能访问本地WEB应用? 本文将介绍使用holer实现的具体步骤. 1. 准备工作 1.1 安装Java 1.7及以上版本 ...

  6. vue与mapbox

    1.引入mapbox 在index.html里面引入maobox gl 或者使用 npm install mapbox-gl 2.功能 我主要这次要实现 地图展示 地图打点(添加Marker) 地图的 ...

  7. 使用selenium爬取网站动态数据

    处理页面动态加载的爬取 selenium selenium是python的一个第三方库,可以实现让浏览器完成自动化的操作,比如说点击按钮拖动滚轮等 环境搭建: 安装:pip install selen ...

  8. python:用wordcloud生成一个文本的词云

    今天学习了wordcloud库,对<三国演义>生成了词云图片,非常漂亮.就想多尝试几个,结果发现一系列问题.最常出现的一个错误就是"UnicodeDecodeError : .. ...

  9. #学习笔记#jsp

    jsp简介 JSP(Java Server Pages)是JavaWeb服务器端的动态资源,它与html页面的作用是相同的,显示数据和获取数据. jsp: 作为请求发起页面,例如显示表单.超链接. : ...

  10. nodejs----初期学习笔记

    //一 回调函数 //require---命令//Node 使用了大量的回调函数,Node 所有 API 都支持回调函数.//例如,我们可以一边读取文件,一边执行其他命令,在文件读取完成后,我们将文件 ...