参考馒头华华：http://d3.decembercafe.org/pages/lessons/14.html 与 tengxing007 :http://blog.csdn.net/tengxing007/article/details/59712572
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>力导向图</title></head><body> ???<script src="https://d3js.org/d3.v4.min.js"></script> ???<script>var nodes = [ { name: "BeiJing" ???}, { name: "XiaMen" }, ?????????????????????????{ name: "XiAn" ???}, { name: "HangZhou" ??}, ?????????????????????????{ name: "ShangHai" ??}, { name: "QingDao" ???}, ?????????????????????????{ name: "NanJing" ???} ]; ????????????????????????????????????var links = [ ?{ source : 0 ?, target: 1 } , { source : 0 ?, target: 2 } , ??????????????????????????{ source : 0 ?, target: 3 } , { source : 1 ?, target: 4 } , ??????????????????????????{ source : 1 ?, target: 5 } , { source : 1 ?, target: 6 } ?]; ???????????????????????????var width = 800; ???????????var height = 600; ???????????var svg = d3.select("body") ???????????????????????.append("svg") ???????????????????????.attr("width",width) ???????????????????????.attr("height",height); ???????????????????????// 通过布局来转换数据，然后进行绘制 ???????????var simulation = d3.forceSimulation(nodes) ?????????????????.force("link", d3.forceLink(links).distance(100)) ?????????????????.force("charge",d3.forceManyBody()) ?????????????????.force("center",d3.forceCenter(width/2, height/2)); ???simulation ?.nodes(nodes) ?.on("tick", ticked); ?simulation.force("link") ?.links(links); ???????????var color = d3.scaleOrdinal(d3.schemeCategory20); ?????????????// 绘制 ???????????var svg_links = svg.selectAll("line") ???????????????.data(links) ???????????????.enter() ???????????????.append("line") ???????????????.style("stroke","#ccc") ???????????????.style("stroke-width",3).call(d3.zoom().scaleExtent([-5, 2])); ??var svg_nodes = svg.selectAll("circle").data(nodes).enter().append("circle") ?.attr("cx", function(d) { return d.x; }) ?.attr("cy", function(d) { return d.y; }) ?.attr("r", ‘20‘) ?.attr("fill", function(d,i){ ???????????????????return color(i); ???????????????}).call(d3.drag().on("start", dragstarted) ?.on("drag", dragged) ?.on("end", dragended)); ?console.log(nodes); //添加描述节点的文字 var svg_texts = svg.selectAll("text") .data(nodes) .enter() .append("text") .style("fill", "black") .attr("dx", 20) .attr("dy", 8) .text(function(d){console.log(d);return d.name; }); ??function dragstarted(d) { ?if (!d3.event.active) simulation.alphaTarget(0.3).restart(); ?d.fx = d.x; ?d.fy = d.y;}function dragged(d) { ?d.fx = d3.event.x; ?d.fy = d3.event.y;}function dragended(d) { ?if (!d3.event.active) simulation.alphaTarget(0); ?d.fx = null; ?d.fy = null;}function ticked() {svg_links.attr("x1", function(d) { return d.source.x; }).attr("y1", function(d) { return d.source.y; }).attr("x2", function(d) { return d.target.x; }).attr("y2", function(d) { return d.target.y; });svg_nodes.attr("cx", function(d) { return d.x; }).attr("cy", function(d) { return d.y; });svg_texts.attr("x", function(d){ return d.x; }) ??.attr("y", function(d){ return d.y; }); ?} ???</script></body> </html>
d3js V4 力导向图
原文地址：https://www.cnblogs.com/cocozj945/p/8328289.html