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. Mosquitto-1.5在Linux上的安装以及Android客户端的实现

    一.关于MQTT MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的" ...

  2. GeoServer java.io.IOException: No such resource: generic.sld No such resource: generic.sld

    原因是 发布 图层时 没有设置类型 默认 generic 但是我们的数据库中 没有这个 解决办法: 点击 图层--点击 相应的 图层名称 ---发布  --- WMS Settings 下面的Defa ...

  3. 6.对图像进行ROI选取并操作

    void Test_ROIWith2Image() { Mat g_srcImage=imread("D:\\OpenCV Projects\\OpenCV_Test_Image\\6.jp ...

  4. GPU知识了解

    前言 今天在使用阿里云的时候,无意间看到了有GPU服务器,于是对它做了一个大概的了解. 概念 GPU是Graphics Processing Unit的缩写,翻译成中文就是图形处理器.是一种专门在个人 ...

  5. 全文检索的Demo

    用到lucene版本为6.3.0版本,利用的分词器为IKAnalyzer分词器,该分词对中文有较好的支持.关于支持lucene的6.xx以上的IkAnalyzer分词jar包下载地址:https:// ...

  6. ipa 注入 dylib

    前些日子再github找到了一个内存修改器 DLGMemor 免越狱在app内植入修改器,感觉很不错,就尝试去看看是否可行. 用到的工具:  Xcode 10. optool 首先要做的,安装 opt ...

  7. Ubuntu16.04 用Nomachine进行远程控制的配置

    本文介绍如何在Ubuntu16.04环境下运用Nomachine进行远程控制. 一. NoMachine介绍 NoMachine是一款基于NX技术进行远程控制的软件,最大的优势是跨平台,简单,可以实现 ...

  8. 著名的Log4j是怎么来的?

    Java在设计之初,借鉴了很多其他语言不错的特性和优点,唯独没有设计日志系统,但是日志的重要性不言而喻,一旦程序运行起来,运行结果与预期不一致,基本就是出Bug了,这个时候需要进行Bug排查,一般有两 ...

  9. 深入理解Java中停止线程

    一.停止线程会带来什么? 对于单线程中,停止单线程就是直接使用关键字return或者break,但是在停止多线程时是让线程在完成任务前去开启另外一条线程,必须放弃当前任务,而这个过程是不可预测,所以必 ...

  10. js: var定义域问题