d3实现概念时钟指示效果
代码语言:html
所属分类:动画
代码描述:d3实现概念时钟指示效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: #454555; } .polar-gantt { width: 320px; height: 320px; margin: 20px auto 0; } .polar-gantt svg { width: 100%; height: 100%; } .polar-gantt svg .hours-hand, .polar-gantt svg .minutes-hand, .polar-gantt svg .seconds-hand { stroke-linecap: round; stroke: rgba(255, 255, 255, 0.5); } .polar-gantt svg .hours-hand { stroke-width: 3; } .polar-gantt svg .minutes-hand { stroke-width: 2; } .polar-gantt svg .seconds-hand { stroke-width: 1; } .polar-gantt svg .hands-cover { fill: #fff; } .polar-gantt svg .hours-tick { stroke: #fff; } .polar-gantt svg .hours-label { font-size: 10px; fill: rgba(255, 255, 255, 0.5); } </style> </head> <body translate="no"> <div class="polar-gantt"> <div id="target" ></div> </div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/d3.v3.js"></script> <script> console.clear(); class PolarGantt { constructor() { this.radians = Math.PI / 180; } init(opt) { let container = d3.select(opt.sel), measures = container.node().getBoundingClientRect(), t = new Date(); this.clockRadius = measures.width * 0.8 / 2; this.margin = measures.width * 0.2 / 4; this.width = (this.clockRadius + this.margin * 2) * 2; this.height = (this.clockRadius + this.margin * 2) * 2; this.hoursHandLength = this.clockRadius - 18; this.minutesHandLength = this.clockRadius / 2; this.secondsHandLength = this.clockRadius / 1.25; this.hoursTickStart = this.clockRadius; this.hoursTickLength = -8; this.hoursLabelRadius = this.clockRadius - 40; this.hoursLabelYOffset = 6; this.hoursScale = d3.scale.linear().range([0, 330]).domain([0, 23]); this.minutesScale = this.secondsScale = d3.scale.linear().range([0, 354]).domain([0, 59]); this.hoursData = { value: t.getHours() + t.getMinutes() / 60, length: -this.hoursHandLength, scale: this.hoursScale }; this.minutesData = { value: t.getMinutes(), length: -this.minutesHandLength, scale: this.minutesScale }; this.secondsData = { value: t.getSeconds(), length: -this.secondsHandLength, scale: this.secondsScale }; this.color = d3.scale.linear(). range(["hsl(-180,50%,50%)", "hsl(180,50%,50%)"]). domain([0, this._fields().length - 1]). interpolate(this._interpolateHsl); this._draw(container); setInterval(() => { this._updateData(); this._moveHands(); }, 1000); } _arc(data) { let t0 = data.start.getHours() + data.start.getMinutes() / 60, t1 = data.end.getHours() + data.end.getMinutes() / 60, scale = this.hoursData.scale, ratio = (this.clockRadius - 8) / this._fields().length, padding = 0.3; let arc = d3.svg.arc(). startAngle(scale(t0) * this.radians). endAngle(scale(t1) * this.radians). innerRadius(d => (d.index + padding) * ratio). outerRadius(d => (d.index - padding) * ratio + ratio). cornerRadius(ratio); return arc(data); } _draw(container) { this._updateData(); let svg = container.append('svg'). attr({ width: this.width, height: this.height }); // Lower Container let face = svg.append('g'). attr({ id: 'clock-face', transform: [ 'translate(', this.clockRadius + this.margin * 2, ',', this.clockRadius + this.margin * 2, ')'].join('') }); // Outer Arc (frame) face.append('path'). attr('d', d3.svg.arc(). startAngle(0). endAngle(Math.PI * 2). innerRadius(this.clockRadius + this.hourTickLength). outerRadius(this.clockRadius)). style('fill', 'rgba(24, 24, 31, 0.8)'); // Inner Circle (background) face.append('circle'). attr({ cx: 0, cy: 0, r: this.clockRadius, fill: 'rgba(31, 30, 39, 0.8)' }); // Ticks face.selectAll('.hours-tick'). data([0, 6, 12, 18]).enter(). append('line'). attr({ class: 'hours-tick', x1: 0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0