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

d3.js 搭建 d3-force-directed-graph 例子相关推荐

A better way to learn D3 js - iLearning D3.js
iLearning D3.js Basic is an iPad app to learn and code with D3. In 1.1 version, new tutorial is prov ...
html文件中包含相关的d3.js文件,D3.js进阶系列之CSV表格文件的读取详解
前言之前在入门系列的教程中,我们常用 d3.json()函数来读取 json 格式的文件.json 格式很强大,但对于普通用户可能不太适合,普通用户更喜欢的是用 Microsoft Excel 或 ...
【D3.js】D3是什么
D3是什么 D3 的全称是 Data-Driven Document,可以理解为:由数据来决定绘图流程的程序设计模型. D3 是一个JavaScript的函数库,是用来做数据可视化的. 将数据变成图形 ...
html+word+clou,d3.js – 用d3.wordcloud重绘文字云
这有点棘手. d3-wordcloud插件(更确切地说是底层的 d3.layout.cloud插件)将修改单词的输入数据集以适应单词的大小. 一点一点地说某些词会越来越大,而其他词会越来越小. 为避免 ...
D3.js、echar.js 前端必备大数据技能
大数据可视化「前言」 web前端一直都是个讲究门面和艺术美感的行业,如果你以为逻辑很强就够了,那就错了,你只适合做后端,真正的好前端是对美感和可视化的东西有一种接近痴狂的爱好,这种契机可以驱使你 ...
一个JS框架D3.js
最近有点不务正业,好吧,诚恳一点面对现实.许多时候我想等我把某些问题,完全想明白,完全理解透,再写点东西:事实往往相反,发现等我真正接近,把某些东西理解好,我自己再也不屑写点东西分享了,没有精神气也好 ...
D3.js的v5版本入门教程（第十四章）—— 力导向图
D3.js的v5版本入门教程(第十四章) 这一章我们来绘制一个力导向图,什么叫力导向图,通俗一点将就是有节点和线组成,当鼠标拖拽一个节点时,其他节点都会受到影响(力导向图有多种类型,本章绘制的效果就是 ...
d3.js v3版本实现-树状图
参考的例子:http://bl.ocks.org/robschmuecker/7880033 一.为什么选择d3.js 二.d3.js概述三:树状图实现 1.创建svg 2.在svg元素里面画一个g ...
d3.js力导向图使用详解
创建一个力导向图需要三个东西: 仿真模拟系统节点力当然,一般我们也会创建links(边)来连接两个节点,例如上图仿真模拟系统中存在多个节点和多种类型的力,通过力控制节点的运动,每个节点都在多个 ...

d3.js 搭建 d3-force-directed-graph 例子

d3.js 搭建 d3-force-directed-graph 例子相关推荐

最新文章

热门文章