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>
...