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” ，领取更多资料哦