d3.js 搭建 d3-force-directed-graph 例子
生活随笔
收集整理的這篇文章主要介紹了
d3.js 搭建 d3-force-directed-graph 例子
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
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>效果圖
更多多資訊或疑問(wèn)內(nèi)容請(qǐng)關(guān)注?微信公眾號(hào) “讓夢(mèng)飛起來(lái)”?或添加小編微信，?后臺(tái)回復(fù) “Python” ，領(lǐng)取更多資料哦
? ?? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ??
總結(jié)
以上是生活随笔為你收集整理的d3.js 搭建 d3-force-directed-graph 例子的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Ubuntu16.04下安装cuda和c
- 下一篇： CentOS7搭建ftp服务器（vsft