d3.js 搭建 d3-force-directed-graph 例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <script src="http://d3js.org/d3.v3.min.js"></script> <style> .node { stroke: #fff; stroke-width: 1.5px; } .link { stroke: #999; stroke-opacity: .6; } </style> <title>Hello World! Site Title</title> </head> <body> <script> var width = 600, height = 400; var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height) var links = [ {source: 0, target: 1}, {source: 0, target: 2}, {source: 1, target: 2}, {source: 2, target: 3}, ]; var nodes = [ {name: 'H'}, {name: 'I'}, {name: 'J'}, {name: 'K'}, ]; var force = d3.layout.force() .size([width, height]) .nodes(d3.values(nodes)) .links(links) .on('tick', tick) .linkDistance(100) .gravity(.15) .friction(.8) .linkStrength(1) .charge(-425) .chargeDistance(600) .start(); var link = svg.selectAll('.link') .data(links) .enter().append('line') .attr('class', 'link'); var node = svg.selectAll('.node') .data(force.nodes()) .enter().append('circle') .attr('class', 'node') .attr('r', width * 0.01) function tick(e) { node.attr('cx', function(d) { return d.x; }) .attr('cy', function(d) { return d.y; }) .call(force.drag); link.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; }); }; </script>效果图
更多多资讯或疑问内容请关注 微信公众号 “让梦飞起来” 或添加小编微信， 后台回复 “Python” ，领取更多资料哦
