d3实现树状生长动画效果代码
代码语言:html
所属分类:动画
代码描述:d3实现树状生长动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { padding: 0; margin: 0; } body, html { height: 100%; width: 100%; overflow: hidden; background: #697ba7; background: radial-gradient(ellipse at center, #001b36 0%, #000 100%); } h1 { font-weight: 300; font-size: 3em; } line { fill: none; stroke: #4682b4; stroke-width: 1.5; } circle { fill: #fff; stroke: #000; stroke-width: 0.5; } </style> </head> <body > <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.v3.js"></script> <script > (function(env){ const PI2 = 2 * Math.PI; const radius = (r) => 1 + Math.sqrt(16 * r); const isNaN = (v) => Number.isNaN(Number(v)); let lastEvent; class Canvas { constructor(width, height) { this.canvas = document.createElement("canvas"); this.canvas.width = width; this.canvas.height = height; this.ctx = this.canvas.getContext("2d"); document.body.appendChild(this.canvas); let zoom = this.zoom = d3.behavior.zoom() .size([width, height]) .scaleExtent([.2, 1]) .on("zoom", () => { lastEvent = d3.event; }); this.d3canvas = d3.select(this.canvas).call(zoom) } get width() { return this.canvas.width } get height() { return this.canvas.height } resize(width, height) { if (this.height == height && this.width == width) return; this.canvas.width = +width; this.canvas.height = +height; this.zoom.size([+width, +height]); } } class Point { constructor({ x, y, color, radius }) { this.x = x; this.y = y; this.color = color; this.radius = radius } } class Catalog extends Point { constructor({ x, y, radius, name, color, bgcolor, parent }) { super({ x, y, color, radius }); this.name = name; this.bgcolor = bgcolor; this.parent = parent; this.weight = 1; } render(ctx) { let r = this.radius; ctx.fillStyle = this.bgcolor; ctx.strokeStyle = this.color; ctx.beginPath(); r = radius(r); ctx.arc(this.x, this.y, r, 0, PI2); ctx.closePath(); ctx.stroke(); ctx.fill(); } } class Link { constructor({source, target, color}) { this.source = source; this.target = target; this.color = color } render(ctx) { ctx.fillStyle = "rgba(255, 255, 255, 0)"; ctx.strokeStyle = this.color; ctx.beginPath(); ctx.moveTo(this.source.x, this.source.y); ctx.lineTo(this.target.x, this.target.y); ctx.closePath(); ctx.stroke(); } } class Force { constructor(width, height, nodes, links) { let collide5, cluster; this.force = d3.layout.force() .charge(function(d) { var l = radius(d.radius) + radius(d.parent && d.parent.radius || 0); return -l * 20//100; }) // .friction(.9) //.gravity(-.001) .linkDistance(60) .nodes(nodes) .links(links) .size([width, height]) } size(width, height) { this.force.size([width, height]); return this; } get nodes() { return this.force.nodes() } set nodes(value) { this.force.nodes(value) } tick(value) { if (!arguments.length) return this.force.on("tick"); this.force.on("tick", value); return this; } start() { this.force.start(); return this; } stop() { this.force.stop(); return this; } } let w = window.innerWidth , h = window.innerHeight .........完整代码请登录后点击上方下载按钮下载查看
网友评论0