学习：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>
...