Last active
May 31, 2018 07:39
-
-
Save ckinmind/7b1e22012f4fed971899a8239eb07348 to your computer and use it in GitHub Desktop.
Bar——动态移动
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <style> | |
| html, | |
| body { | |
| background: #1A7BAE; | |
| } | |
| .infos { | |
| position: fixed; | |
| z-index: 100; | |
| top: 0; | |
| left: 0; | |
| color: rgb(250, 250, 250); | |
| font-family: 'Open Sans', Tahoma, sans-serif; | |
| font-weight: 300; | |
| padding: 0.5em; | |
| padding-right: 2em; | |
| padding-bottom: 1em; | |
| transition-duration: .3s; | |
| } | |
| .infos a { | |
| color: rgb(230, 230, 230); | |
| } | |
| .infos h1 { | |
| font-size: 1.8em; | |
| } | |
| .infos p { | |
| padding-top: .5em; | |
| font-size: 1.1em; | |
| padding-left: .1em; | |
| } | |
| .infos p.made-by { | |
| font-size: 0.9em; | |
| } | |
| .infos p.instructions { | |
| padding-top: 1em; | |
| } | |
| svg { | |
| font: 10px sans-serif; | |
| margin-top: 100px; | |
| margin-left: 50px; | |
| } | |
| .line { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: 4px; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| path { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } | |
| .points circle { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: 1px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.8/d3.min.js"></script> | |
| <script> | |
| var totalHeight = 500; | |
| var totalWidth = d3.select("body")[0][0].clientWidth; | |
| var waveSize = totalWidth / 20; | |
| var speed = 500; | |
| var rectWidth = waveSize * 0.8; | |
| var pointSize = 13; | |
| var margin = { | |
| top: 0, | |
| right: 40, | |
| bottom: 0, | |
| left: 40 | |
| }, | |
| width = totalWidth - margin.left - margin.right, | |
| height = totalHeight - margin.top - margin.bottom; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var pointCounter = 3; | |
| function newData() { | |
| var result = { | |
| line: random() * 0.7 + 0.3, | |
| line2: random() * 0.5 - 0.25, | |
| bar: Math.random() * 0.8 + 0.2, | |
| point: false | |
| }; | |
| if (result.line > 0.4) { | |
| pointCounter++; | |
| if (pointCounter > 3) { | |
| pointCounter = 0; | |
| result.point = true; | |
| } | |
| } | |
| return result; | |
| } | |
| var n = Math.floor(width / waveSize), | |
| random = d3.random.normal(0, .2), | |
| data = d3.range(n).map(function() { | |
| return newData() | |
| }); | |
| var x = d3.scale.linear() | |
| .domain([0, n + 1]) | |
| .range([0, width]); | |
| var y = d3.scale.linear() | |
| .domain([-1, 1]) | |
| .range([height, 0]); | |
| var line = d3.svg.line() | |
| .x(function(d, i) { | |
| return x(i); | |
| }) | |
| .y(function(d, i) { | |
| // return y(-0.5); | |
| return y(d.line); | |
| }) | |
| //.interpolate("basis"); | |
| svg.append("defs").append("clipPath") | |
| .attr("id", "clip") | |
| .append("rect") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // Translate Group | |
| var translateGroup = svg.append("g") | |
| //.attr('clip-path', "url(#clip)") | |
| .append('g') | |
| .attr("transform", "translate(" + x(-0.5) + ",0)") | |
| // Points | |
| var points = translateGroup.append('g').attr('class', "points").selectAll('circle').data(data); | |
| points.enter().append('circle') | |
| .interrupt() | |
| .attr('cx', function(d, i) { | |
| return x(i + 0.5); | |
| }) | |
| .attr('cy', function(d, i) { | |
| return y(d.line); | |
| }) | |
| .attr('r', 0) | |
| .transition().duration(speed).ease('linear') | |
| .attr('r', function(d, i) { | |
| if (d.point == true) { | |
| return pointSize | |
| } | |
| return 0; | |
| }); | |
| // Rects | |
| var rects = translateGroup.append('g').selectAll('rect').data(data); | |
| rects.enter().append('rect') | |
| .interrupt() | |
| .attr('x', (d, i) => x(i)) | |
| .attr('width', rectWidth) | |
| .attr('height', 0) | |
| .attr('y', (d, i) => y(-0.5)) | |
| .style('fill', '#fff') | |
| .style('opacity', '0.5') | |
| .interrupt() | |
| .transition().duration(speed).ease('linear') | |
| .attr('y', function(d, i) { | |
| return y(-0.5) - y(d.bar); | |
| }) | |
| .attr('height', function(d, i) { | |
| return y(d.bar) | |
| }) | |
| .style('opacity', '0.5'); | |
| console.log('----rects----', rects) | |
| console.log('----rects----', Array.isArray(rects)) | |
| console.log('----rects----', rects.length) | |
| console.log('----rects----', rects[0]) | |
| // Line 1 | |
| var lineZero = d3.svg.line() | |
| .x(function(d, i) { | |
| return x(i + 0.5); | |
| }) | |
| .y(function(d, i) { | |
| return y(-0.5); | |
| }) | |
| var lineStart = d3.svg.line() | |
| .x(function(d, i) { | |
| if (i == data.length - 1) { | |
| return x(i - 1 + 0.5) | |
| } | |
| return x(i + 0.5); | |
| }) | |
| .y(function(d, i) { | |
| if (i == data.length - 1) { | |
| return y(data[i - 1].line) | |
| } | |
| return y(d.line); | |
| }) | |
| var lineEnd = d3.svg.line() | |
| .x(function(d, i) { | |
| if (i == 0) { | |
| return x(i + 1 + 0.5) | |
| } | |
| return x(i + 0.5); | |
| }) | |
| .y(function(d, i) { | |
| if (i == 0) { | |
| return y(data[i + 1].line) | |
| } | |
| return y(d.line); | |
| }) | |
| var lines = translateGroup | |
| .append('path') | |
| .attr('stroke-width', '3px') | |
| .datum(data) | |
| lines | |
| .interrupt() | |
| .attr("d", lineZero) | |
| .transition() | |
| .attr("d", lineStart); | |
| // Line 2 | |
| var lineZero2 = d3.svg.line() | |
| .x(function(d, i) { | |
| return x(i + 0.5); | |
| }) | |
| .y(function(d, i) { | |
| return y(-0.5); | |
| }) | |
| .interpolate('basis'); | |
| var lineStart2 = d3.svg.line() | |
| .x(function(d, i) { | |
| if (i == data.length - 1) { | |
| return x(i - 1 + 0.5) | |
| } | |
| return x(i + 0.5); | |
| }) | |
| .y(function(d, i) { | |
| if (i == data.length - 1) { | |
| return y(data[i - 1].line2) | |
| } | |
| return y(d.line2); | |
| }) | |
| .interpolate('basis'); | |
| var lineEnd2 = d3.svg.line() | |
| .x(function(d, i) { | |
| if (i == 0) { | |
| return x(i + 1 + 0.5) | |
| } | |
| return x(i + 0.5); | |
| }) | |
| .y(function(d, i) { | |
| if (i == 0) { | |
| return y(data[i + 1].line2) | |
| } | |
| return y(d.line2); | |
| }) | |
| .interpolate('basis'); | |
| var lines2 = translateGroup | |
| .append('path') | |
| .attr('stroke-width', '2px') | |
| .datum(data); | |
| lines2 | |
| .interrupt() | |
| .attr("d", lineZero2) | |
| .transition().duration(speed).ease('linear') | |
| .attr("d", lineStart2); | |
| // Functions | |
| function renderElems() { | |
| // Rects | |
| rects.data(data) | |
| .attr('height', (d, i) => y(d.bar)) | |
| .attr('y', (d, i) => y(-0.5) - y(d.bar)) | |
| rects.each(function(d, i) { | |
| if (i == 0) { | |
| d3.select(this) | |
| .interrupt() | |
| .transition().duration(speed).ease('linear') | |
| .attr('height', function(d, i) { | |
| return y(1) | |
| }) | |
| .attr('y', function(d, i) { | |
| return y(-0.5); | |
| }); | |
| } | |
| if (i == rects.size() - 1) { | |
| d3.select(this) | |
| .interrupt() | |
| .attr('height', function(d, i) { | |
| return y(1) | |
| }) | |
| .attr('y', function(d, i) { | |
| return y(-0.5); | |
| }) | |
| .transition().duration(speed).ease('linear') | |
| .attr('height', function(d, i) { | |
| return y(d.bar) | |
| }) | |
| .attr('y', function(d, i) { | |
| return y(-0.5) - y(d.bar); | |
| }); | |
| } | |
| }); | |
| // Points | |
| points.data(data); | |
| points | |
| .attr('cx', function(d, i) { | |
| return x(i + 0.5); | |
| }) | |
| .attr('cy', function(d, i) { | |
| return y(d.line); | |
| }) | |
| .attr('r', function(d, i) { | |
| if (d.point === true) { | |
| return pointSize; | |
| } | |
| return 0; | |
| }); | |
| points.each(function(d, i) { | |
| if (d.point == false) { | |
| return true; | |
| } | |
| if (i == 0) { | |
| d3.select(this) | |
| .interrupt() | |
| .transition().duration(speed).ease('linear') | |
| .attr('r', 0); | |
| } | |
| if (i == points.size() - 1) { | |
| d3.select(this) | |
| .interrupt() | |
| .attr('r', 0) | |
| .transition().duration(speed).ease('linear') | |
| .attr('r', pointSize); | |
| } | |
| }); | |
| } | |
| function renderLines() { | |
| lines | |
| .interrupt() | |
| .attr("d", lineStart) | |
| .transition().duration(speed).ease('linear') | |
| .attr("d", lineEnd); | |
| lines2 | |
| .interrupt() | |
| .attr("d", lineStart2) | |
| .transition() | |
| .duration(speed) | |
| .ease("linear") | |
| .attr("d", lineEnd2); | |
| } | |
| function loop() { | |
| // pop the old data point off the front | |
| data.shift(); | |
| // push a new data point onto the back | |
| data.push(newData()); | |
| renderElems(); | |
| renderLines(); | |
| translateGroup | |
| .interrupt() | |
| .attr("transform", "translate(" + x(0.5) + ",0)") | |
| .transition().duration(speed).ease('linear') | |
| .attr("transform", "translate(" + x(-0.5) + ",0)"); | |
| window.setTimeout(function() { | |
| loop(); | |
| }, speed + 10); | |
| } | |
| window.setTimeout(function() { | |
| loop(); | |
| }, speed * 1.5); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang='en'> | |
| <head> | |
| <meta charset='UTF-8'> | |
| <title>Document</title> | |
| <style> | |
| html, | |
| body { | |
| background: #1A7BAE; | |
| } | |
| .infos { | |
| position: fixed; | |
| z-index: 100; | |
| top: 0; | |
| left: 0; | |
| color: rgb(250, 250, 250); | |
| font-family: 'Open Sans', Tahoma, sans-serif; | |
| font-weight: 300; | |
| padding: 0.5em; | |
| padding-right: 2em; | |
| padding-bottom: 1em; | |
| transition-duration: .3s; | |
| } | |
| .infos a { | |
| color: rgb(230, 230, 230); | |
| } | |
| .infos h1 { | |
| font-size: 1.8em; | |
| } | |
| .infos p { | |
| padding-top: .5em; | |
| font-size: 1.1em; | |
| padding-left: .1em; | |
| } | |
| .infos p.made-by { | |
| font-size: 0.9em; | |
| } | |
| .infos p.instructions { | |
| padding-top: 1em; | |
| } | |
| svg { | |
| font: 10px sans-serif; | |
| margin-top: 100px; | |
| margin-left: 50px; | |
| } | |
| .line { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: 4px; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| path { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } | |
| .points circle { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: 1px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src='//d3js.org/d3.v4.min.js'></script> | |
| <script> | |
| const totalHeight = 500 | |
| console.log(d3.select('body')) | |
| const totalWidth = d3.select('body')['_groups'][0][0].clientWidth // ? | |
| console.log(totalWidth) | |
| const waveSize = totalWidth / 20 | |
| const speed = 500 | |
| const rectWidth = waveSize * 0.8 | |
| const pointSize = 13 | |
| const margin = {top: 0, right: 40, bottom: 0, left: 40}, | |
| width = totalWidth - margin.left - margin.right, | |
| height = totalHeight - margin.top - margin.bottom | |
| const svg = d3.select('body') | |
| .append('svg') | |
| .attr('width', width + margin.left + margin.right) | |
| .attr('height', height + margin.top + margin.bottom) | |
| .append('g') | |
| .attr('transform', `translate(${margin.left}, ${margin.top})`) | |
| let pointCounter = 3 | |
| // 产生随机数 | |
| function newData() { | |
| const result = { | |
| line: random() * 0.7 + 0.3, // 0.3到1的随机数 | |
| line2: random() * 0.5 - 0.25, // -0.25到0.25的随机数 | |
| bar: Math.random() * 0.8 + 0.2, // 0.2到1的随机数 | |
| point: false | |
| } | |
| // 这里有一种算法去决定是否显示point | |
| if (result.line > 0.4) { | |
| pointCounter++ | |
| if (pointCounter > 3) { | |
| pointCounter = 0 | |
| result.point = true | |
| } | |
| } | |
| return result | |
| } | |
| let n = Math.floor(width / waveSize) // 柱子数目 | |
| let random = d3.randomNormal(0, 0.2) // d3.randomNormal - 正态分布 | |
| let data = d3.range(n).map(() => newData()) // 随机生成等柱子数目的数据 | |
| const x = d3.scaleLinear().domain([0, n + 1]).range([0, width]) | |
| const y = d3.scaleLinear().domain([-1, 1]).range([height, 0]) | |
| const line = d3.line() | |
| .x((d, i) => x(i)) | |
| .y((d, i) => y(d.line)) | |
| //.interpolate('basis'); | |
| svg.append('defs') | |
| .append('clipPath') | |
| .attr('id', 'clip') | |
| .append('rect') | |
| .attr('width', width) | |
| .attr('height', height) | |
| // Translate Group | |
| const translateGroup = svg.append('g') | |
| //.attr('clip-path', 'url(#clip)') | |
| .append('g') | |
| .attr('transform', `translate(${x(-0.5)},0)`) | |
| // Points | |
| const points = translateGroup.append('g') | |
| .attr('class', 'points') | |
| .selectAll('circle') | |
| .data(data) | |
| points.enter() | |
| .append('circle') | |
| .interrupt() // 中断和取消选定元素的过渡 | |
| .attr('cx', (d, i) => x(i + 0.5)) | |
| .attr('cy', (d, i) => y(d.line)) | |
| .attr('r', 0) | |
| .transition() | |
| .duration(speed) | |
| .ease(d3.easeLinear) | |
| .attr('r', (d, i) => d.point == true ? pointSize : 0) | |
| // Rects | |
| const rects = translateGroup | |
| .append('g') | |
| .selectAll('rect') | |
| .data(data) | |
| rects.enter() | |
| .append('rect') | |
| .interrupt() // 中断和取消选定元素的过渡 | |
| .attr('x', (d, i) => x(i)) | |
| .attr('width', rectWidth) | |
| .attr('height', 0) | |
| .attr('y', (d, i) => y(-0.5)) | |
| .style('fill', '#fff') | |
| .style('opacity', '0.5') | |
| .interrupt() | |
| .transition() | |
| .duration(speed) | |
| .ease(d3.easeLinear) | |
| .attr('y', (d, i) => y(-0.5) - y(d.bar)) | |
| .attr('height', (d, i) => y(d.bar)) | |
| .style('opacity', '0.5') | |
| console.log('----rects----', rects) | |
| console.log('----rects----', Array.isArray(rects)) | |
| console.log('----rects----', rects.length) | |
| console.log('----rects----', rects[0]) | |
| // Line 1 | |
| const lineZero = d3.line() | |
| .x((d, i) => x(i + 0.5)) | |
| .y((d, i) => y(-0.5)) | |
| const lineStart = d3.line() | |
| .x((d, i) => (i == data.length - 1) ? x(i - 1 + 0.5) : x(i + 0.5)) | |
| .y((d, i) => (i == data.length - 1) ? y(data[i - 1].line) : y(d.line)) | |
| const lineEnd = d3.line() | |
| .x((d, i) => (i == 0) ? x(i + 1 + 0.5) : x(i + 0.5)) | |
| .y((d, i) => (i == 0) ? y(data[i + 1].line) : y(d.line)) | |
| const lines = translateGroup | |
| .append('path') | |
| .attr('stroke-width', '3px') | |
| .datum(data) | |
| lines | |
| .interrupt() | |
| .attr('d', lineZero) | |
| .transition() | |
| .attr('d', lineStart); | |
| // Line 2 | |
| const lineZero2 = d3.line() | |
| .x((d, i) => x(i + 0.5)) | |
| .y((d, i) => y(-0.5)) | |
| // .interpolate('basis') | |
| const lineStart2 = d3.line() | |
| .x((d, i) => (i == data.length - 1) ? x(i - 1 + 0.5) : x(i + 0.5)) | |
| .y((d, i) => (i == data.length - 1) ? y(data[i - 1].line2) : y(d.line2)) | |
| // .interpolate('basis') | |
| const lineEnd2 = d3.line() | |
| .x((d, i) => (i == 0) ? x(i + 1 + 0.5) : x(i + 0.5)) | |
| .y((d, i) => (i == 0) ? y(data[i + 1].line2) : y(d.line2)) | |
| // .interpolate('basis') | |
| const lines2 = translateGroup | |
| .append('path') | |
| .attr('stroke-width', '2px') | |
| .datum(data) | |
| lines2 | |
| .interrupt() | |
| .attr('d', lineZero2) | |
| .transition() | |
| .duration(speed) | |
| .ease(d3.easeLinear) | |
| .attr('d', lineStart2) | |
| // Functions | |
| function renderElems() { | |
| // Rects | |
| rects.data(data) | |
| .attr('height', (d, i) => y(d.bar)) | |
| .attr('y', (d, i) => y(-0.5) - y(d.bar)) | |
| rects.each(function(d, i) { | |
| console.log('--------') | |
| if (i == 0) { | |
| console.log('--------') | |
| d3.select(this) | |
| .interrupt() | |
| .transition() | |
| .duration(speed) | |
| .ease(d3.easeLinear) | |
| .attr('height', (d, i) => y(1)) | |
| .attr('y', (d, i) => y(-0.5)) | |
| } | |
| if (i == rects.size() - 1) { | |
| d3.select(this) | |
| .interrupt() | |
| .attr('height', (d, i) => y(1)) | |
| .attr('y', (d, i) => y(-0.5)) | |
| .transition() | |
| .duration(speed) | |
| .ease(d3.easeLinear) | |
| .attr('height', (d, i) => y(d.bar)) | |
| .attr('y', (d, i) => y(-0.5) - y(d.bar)) | |
| } | |
| }) | |
| // Points | |
| points.data(data); | |
| points | |
| .attr('cx', (d, i) => x(i + 0.5)) | |
| .attr('cy', (d, i) => y(d.line)) | |
| .attr('r', (d, i) => (d.point === true) ? pointSize : 0) | |
| points.each(function(d, i) { | |
| console.log('******') | |
| if (d.point == false) { | |
| return true; | |
| } | |
| if (i == 0) { | |
| d3.select(this) | |
| .interrupt() | |
| .transition() | |
| .duration(speed) | |
| .ease(d3.easeLinear) | |
| .attr('r', 0) | |
| } | |
| if (i == points.size() - 1) { | |
| d3.select(this) | |
| .interrupt() | |
| .attr('r', 0) | |
| .transition() | |
| .duration(speed) | |
| .ease(d3.easeLinear) | |
| .attr('r', pointSize); | |
| } | |
| }) | |
| } | |
| function renderLines() { | |
| lines | |
| .interrupt() | |
| .attr('d', lineStart) | |
| .transition() | |
| .duration(speed) | |
| .ease(d3.easeLinear) | |
| .attr('d', lineEnd) | |
| lines2 | |
| .interrupt() | |
| .attr('d', lineStart2) | |
| .transition() | |
| .duration(speed) | |
| .ease(d3.easeLinear) | |
| .attr('d', lineEnd2) | |
| } | |
| function loop() { | |
| // 删除第一个数据，再从尾部插入一个新数据 | |
| data.shift() | |
| data.push(newData()) | |
| renderElems() | |
| renderLines() | |
| translateGroup | |
| .interrupt() | |
| .attr('transform', `translate(${x(0.5)}, 0)`) | |
| .transition() | |
| .duration(speed) | |
| .ease(d3.easeLinear) | |
| .attr('transform', `translate(${x(-0.5)}, 0)`) | |
| window.setTimeout(function() { | |
| loop(); | |
| }, speed + 10) | |
| } | |
| window.setTimeout(function() { | |
| loop(); | |
| }, speed * 1.5); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <style> | |
| html, | |
| body { | |
| background: #1A7BAE; | |
| } | |
| .infos { | |
| position: fixed; | |
| z-index: 100; | |
| top: 0; | |
| left: 0; | |
| color: rgb(250, 250, 250); | |
| font-family: 'Open Sans', Tahoma, sans-serif; | |
| font-weight: 300; | |
| padding: 0.5em; | |
| padding-right: 2em; | |
| padding-bottom: 1em; | |
| transition-duration: .3s; | |
| } | |
| .infos a { | |
| color: rgb(230, 230, 230); | |
| } | |
| .infos h1 { | |
| font-size: 1.8em; | |
| } | |
| .infos p { | |
| padding-top: .5em; | |
| font-size: 1.1em; | |
| padding-left: .1em; | |
| } | |
| .infos p.made-by { | |
| font-size: 0.9em; | |
| } | |
| .infos p.instructions { | |
| padding-top: 1em; | |
| } | |
| svg { | |
| font: 10px sans-serif; | |
| margin-top: 100px; | |
| margin-left: 50px; | |
| } | |
| .line { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: 4px; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| path { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } | |
| .points circle { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: 1px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.8/d3.min.js"></script> | |
| <script> | |
| var totalHeight = 500; | |
| var totalWidth = d3.select("body")[0][0].clientWidth; | |
| var waveSize = totalWidth / 20; | |
| var speed = 500; | |
| var rectWidth = waveSize * 0.8; | |
| var pointSize = 13; | |
| var margin = {top: 0, right: 40, bottom: 0, left: 40}, | |
| width = totalWidth - margin.left - margin.right, | |
| height = totalHeight - margin.top - margin.bottom; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var pointCounter = 3; | |
| function newData() { | |
| var result = { | |
| line: random() * 0.7 + 0.3, | |
| line2: random() * 0.5 - 0.25, | |
| bar: Math.random() * 0.8 + 0.2, | |
| point: false | |
| }; | |
| if (result.line > 0.4) { | |
| pointCounter++; | |
| if (pointCounter > 3) { | |
| pointCounter = 0; | |
| result.point = true; | |
| } | |
| } | |
| return result; | |
| } | |
| var n = Math.floor(width / waveSize), | |
| random = d3.random.normal(0, .2), | |
| data = d3.range(n).map(function() { | |
| return newData() | |
| }); | |
| var x = d3.scale.linear() | |
| .domain([0, n + 1]) | |
| .range([0, width]); | |
| var y = d3.scale.linear() | |
| .domain([-1, 1]) | |
| .range([height, 0]); | |
| var line = d3.svg.line() | |
| .x(function(d, i) { | |
| return x(i); | |
| }) | |
| .y(function(d, i) { | |
| // return y(-0.5); | |
| return y(d.line); | |
| }) | |
| //.interpolate("basis"); | |
| svg.append("defs").append("clipPath") | |
| .attr("id", "clip") | |
| .append("rect") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // Translate Group | |
| var translateGroup = svg.append("g") | |
| // .attr('clip-path', "url(#clip)") | |
| .attr('class', 'bar-group') | |
| .append('g') | |
| .attr("transform", "translate(" + x(-0.5) + ",0)") | |
| // Rects | |
| var rects = translateGroup.append('g').selectAll('rect').data(data); | |
| rects.enter().append('rect') | |
| .interrupt() | |
| .attr('x', (d, i) => x(i)) | |
| .attr('width', rectWidth) | |
| .attr('height', 0) | |
| .attr('y', (d, i) => y(-0.5)) | |
| .style('fill', '#fff') | |
| .style('opacity', '0.5') | |
| .interrupt() | |
| .transition().duration(speed).ease('linear') | |
| .attr('y', function(d, i) { | |
| return y(-0.5) - y(d.bar); | |
| }) | |
| .attr('height', function(d, i) { | |
| return y(d.bar) | |
| }) | |
| .style('opacity', '0.5'); | |
| // Functions | |
| function renderElems() { | |
| // Rects | |
| rects.data(data) | |
| .attr('height', (d, i) => y(d.bar)) | |
| .attr('y', (d, i) => y(-0.5) - y(d.bar)) | |
| rects.each(function(d, i) { | |
| if (i == 0) { | |
| d3.select(this) | |
| .interrupt() | |
| .transition().duration(speed).ease('linear') | |
| .attr('height', function(d, i) { | |
| return y(1) | |
| }) | |
| .attr('y', function(d, i) { | |
| return y(-0.5); | |
| }); | |
| } | |
| if (i == rects.size() - 1) { | |
| d3.select(this) | |
| .interrupt() | |
| .attr('height', function(d, i) { | |
| return y(1) | |
| }) | |
| .attr('y', function(d, i) { | |
| return y(-0.5); | |
| }) | |
| .transition().duration(speed).ease('linear') | |
| .attr('height', function(d, i) { | |
| return y(d.bar) | |
| }) | |
| .attr('y', function(d, i) { | |
| return y(-0.5) - y(d.bar); | |
| }); | |
| } | |
| }); | |
| } | |
| function loop() { | |
| // pop the old data point off the front | |
| data.shift(); | |
| // push a new data point onto the back | |
| data.push(newData()); | |
| renderElems(); | |
| translateGroup | |
| .interrupt() | |
| .attr("transform", "translate(" + x(0.5) + ",0)") | |
| .transition().duration(speed).ease('linear') | |
| .attr("transform", "translate(" + x(-0.5) + ",0)"); | |
| window.setTimeout(function() { | |
| loop(); | |
| }, speed + 10); | |
| } | |
| window.setTimeout(function() { | |
| loop(); | |
| }, speed * 1.5); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang='en'> | |
| <head> | |
| <meta charset='UTF-8'> | |
| <title>Document</title> | |
| <style> | |
| html, | |
| body { | |
| background: #1A7BAE; | |
| } | |
| .infos { | |
| position: fixed; | |
| z-index: 100; | |
| top: 0; | |
| left: 0; | |
| color: rgb(250, 250, 250); | |
| font-family: 'Open Sans', Tahoma, sans-serif; | |
| font-weight: 300; | |
| padding: 0.5em; | |
| padding-right: 2em; | |
| padding-bottom: 1em; | |
| transition-duration: .3s; | |
| } | |
| .infos a { | |
| color: rgb(230, 230, 230); | |
| } | |
| .infos h1 { | |
| font-size: 1.8em; | |
| } | |
| .infos p { | |
| padding-top: .5em; | |
| font-size: 1.1em; | |
| padding-left: .1em; | |
| } | |
| .infos p.made-by { | |
| font-size: 0.9em; | |
| } | |
| .infos p.instructions { | |
| padding-top: 1em; | |
| } | |
| svg { | |
| font: 10px sans-serif; | |
| margin-top: 100px; | |
| margin-left: 50px; | |
| } | |
| .line { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: 4px; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| path { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } | |
| .points circle { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: 1px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src='//d3js.org/d3.v4.min.js'></script> | |
| <script> | |
| const totalHeight = 500 | |
| console.log(d3.select('body')) | |
| const totalWidth = d3.select('body')['_groups'][0][0].clientWidth // ? | |
| console.log(totalWidth) | |
| const waveSize = totalWidth / 20 | |
| const speed = 500 | |
| const rectWidth = waveSize * 0.8 | |
| const pointSize = 13 | |
| const margin = {top: 0, right: 40, bottom: 0, left: 40}, | |
| width = totalWidth - margin.left - margin.right, | |
| height = totalHeight - margin.top - margin.bottom | |
| const svg = d3.select('body') | |
| .append('svg') | |
| .attr('width', width + margin.left + margin.right) | |
| .attr('height', height + margin.top + margin.bottom) | |
| .append('g') | |
| .attr('transform', `translate(${margin.left}, ${margin.top})`) | |
| let pointCounter = 3 | |
| // 产生随机数 | |
| function newData() { | |
| const result = { | |
| line: random() * 0.7 + 0.3, // 0.3到1的随机数 | |
| line2: random() * 0.5 - 0.25, // -0.25到0.25的随机数 | |
| bar: Math.random() * 0.8 + 0.2, // 0.2到1的随机数 | |
| point: false | |
| } | |
| // 这里有一种算法去决定是否显示point | |
| if (result.line > 0.4) { | |
| pointCounter++ | |
| if (pointCounter > 3) { | |
| pointCounter = 0 | |
| result.point = true | |
| } | |
| } | |
| return result | |
| } | |
| let n = Math.floor(width / waveSize) // 柱子数目 | |
| let random = d3.randomNormal(0, 0.2) // d3.randomNormal - 正态分布 | |
| let data = d3.range(n).map(() => newData()) // 随机生成等柱子数目的数据 | |
| const x = d3.scaleLinear().domain([0, n + 1]).range([0, width]) | |
| const y = d3.scaleLinear().domain([-1, 1]).range([height, 0]) | |
| svg.append('defs') | |
| .append('clipPath') | |
| .attr('id', 'clip') | |
| .append('rect') | |
| .attr('width', totalWidth) | |
| .attr('height', totalHeight) | |
| // Translate Group | |
| let translateGroup = svg.append('g') | |
| .append('g') | |
| .attr('transform', `translate(${x(-0.5)},0)`) | |
| // Rects | |
| let rects = translateGroup | |
| .append('g') | |
| .attr('clip-path', 'url(#clip)') | |
| .selectAll('rect') | |
| .data(data) | |
| rects.enter() | |
| .append('rect') | |
| .interrupt() // 中断和取消选定元素的过渡 | |
| .attr('x', (d, i) => x(i)) | |
| .attr('width', rectWidth) | |
| .attr('height', 0) | |
| .attr('y', (d, i) => y(-0.5)) | |
| .style('fill', '#fff') | |
| .style('opacity', '0.5') | |
| .interrupt() | |
| .transition() | |
| .duration(speed) | |
| .ease(d3.easeLinear) | |
| .attr('y', (d, i) => y(-0.5) - y(d.bar)) | |
| .attr('height', (d, i) => y(d.bar)) | |
| .style('opacity', '0.5') | |
| .on('start',tick) | |
| function tick() { | |
| console.log(rects.nodes()) | |
| // data.push(newData()) | |
| // | |
| //// | |
| // d3.select(this) | |
| // .attr('transform', null) | |
| // | |
| // d3.active(this) // d3.active - 对于一个给定的节点选择活跃中的过渡 | |
| // .attr('transform', `translate(${x(-1)},0)`) | |
| // .transition() | |
| // .on('start', tick) | |
| // | |
| // data.shift() | |
| } | |
| // Functions | |
| function renderElems() { | |
| // Rects | |
| rects.data(data) | |
| .attr('height', (d, i) => y(d.bar)) | |
| .attr('y', (d, i) => y(-0.5) - y(d.bar)) | |
| rects.each(function(d, i) { | |
| console.log('----------each') | |
| if (i == 0) { | |
| console.log('------i = 0') | |
| d3.select(this) | |
| .interrupt() | |
| .transition() | |
| .duration(speed) | |
| .ease(d3.easeLinear) | |
| .attr('height', (d, i) => y(1)) | |
| .attr('y', (d, i) => y(-0.5)) | |
| } | |
| if (i == rects.size() - 1) { | |
| console.log('----------i = last') | |
| d3.select(this) | |
| .interrupt() | |
| .attr('height', (d, i) => y(1)) | |
| .attr('y', (d, i) => y(-0.5)) | |
| .transition() | |
| .duration(speed) | |
| .ease(d3.easeLinear) | |
| .attr('height', (d, i) => y(d.bar)) | |
| .attr('y', (d, i) => y(-0.5) - y(d.bar)) | |
| } | |
| }) | |
| } | |
| function loop() { | |
| // 删除第一个数据，再从尾部插入一个新数据 | |
| data.shift() | |
| data.push(newData()) | |
| renderElems() | |
| translateGroup | |
| .interrupt() | |
| .attr('transform', `translate(${x(0.5)}, 0)`) | |
| .transition() | |
| .duration(speed) | |
| .ease(d3.easeLinear) | |
| .attr('transform', `translate(${x(-0.5)}, 0)`) | |
| window.setTimeout(function() { | |
| loop(); | |
| }, speed + 10) | |
| } | |
| // window.setTimeout(function() { | |
| // loop(); | |
| // }, speed * 1.5); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment