消除D3基本折線圖過渡中的突然添加/刪除
[英]Eliminate sudden additions/deletions in D3 basis line chart transition
問題描述
我有完全類似的問題
一個區別是，我將線插補為“基本”
var line = d3.svg.line().interpolate('basis')
正是在這13個小時內掙扎：/請幫助
<html> <head> <title>Chart</title> <style> path { stroke: #f00; } .line { stroke: #0f0; fill: none; stroke-width: 2px; } .rule { stroke: #ccc; stroke-width: 1px; } </style> </head> <body> <p>I want to get the chart below to transition such that the points on the lines appear to move up and down, not side to side. </p> <p>When transitioning to the smaller data-set especially, I'd like to not have a white gap appear before the lines take shape. </p> <p>Also, the grid-lines should slide into and out of existence, rather than appearing or disappearing. Ideas? </p> <script src="http://d3js.org/d3.v2.min.js"></script> <script> var data = [ [1,8,8,8,8,8,8,8,8,8,8,8,8,8,8], [8,1,1,1,1,1,1,1,1,1,1,1,1,1,1], ]; var data3 = [ [1,1,1], [8,8,8], ]; var w = 500, h = 100; var chart = d3.select('body').append('div') .attr('class', 'chart') .append('svg:svg') .attr('width', w) .attr('height', h); var color = d3.scale.category10(); // Add path interpolator to d3 d3.interpolators.push(function(a, b) { debugger; var isPath, isArea, interpolator, ac, bc, an, bn, d; // Create a new array of a given length and fill it with the given value function fill(value, length) { return d3.range(length) .map(function() { return value; }); } // Extract an array of coordinates from the path string function extractCoordinates(path) { return path.substr(1, path.length - (isArea ? 2 : 1)).split('L'); } // Create a path from an array of coordinates function makePath(coordinates) { return 'M' + coordinates.join('L') + (isArea ? 'Z' : ''); } // Buffer the smaller path with coordinates at the same position function bufferPath(p1, p2) { var d = p2.length - p1.length; if (isArea) { return fill(p1[0], d/2).concat(p1, fill(p1[p1.length - 1], d/2)); } else { return fill(p1[0], d).concat(p1); } } isPath = /M-?\\d*\\.?\\d*,-?\\d*\\.?\\d*(L-?\\d*\\.?\\d*,-?\\d*\\.?\\d*)*Z?/; if (isPath.test(a) && isPath.test(b)) { isArea = a[a.length - 1] === 'Z'; ac = extractCoordinates(a); bc = extractCoordinates(b); an = ac.length; bn = bc.length; if (an > bn) { bc = bufferPath(bc, ac); } if (bn > an) { ac = bufferPath(ac, bc); } // Create an interpolater with the buffered paths (if both paths are of the same length, // the function will end up being the default string interpolator) interpolator = d3.interpolateString(bn > an ? makePath(ac) : a, an > bn ? makePath(bc) : b); // If the ending value changed, make sure the final interpolated value is correct return bn > an ? interpolator : function(t) { return t === 1 ? b : interpolator(t); }; } }); function drawdata(data, chart) { var num = data[0].length-1; var x = d3.scale.linear().domain([0, num]).range([0,w]); var y = d3.scale.linear().domain([0, 10]).range([h, 0]); var line = d3.svg.line().interpolate('basis') .x(function(d, i) { return x(i); }) .y(function(d) { return y(d); }); var flat = d3.svg.line() .x(function(d, i) { return x(i); }) .y(y(-1)); var lines = chart.selectAll('.line') .data(data); lines.enter().append('path') .attr('class', 'line') .style('stroke', function(d,i) { return color(i); }) .attr('d', line); lines.transition() .ease('linear') .duration(500) .attr('d', line); lines.exit().remove(); // legend var ticks = chart.selectAll('line') .data(x.ticks(num)); ticks.enter().append('line') .attr('x1', x) .attr('x2', x) .attr('y1', 0) .attr('y2', h) .attr('class', 'rule'); ticks.transition() .ease('linear') .duration(500) .attr('x1', x) .attr('x2', x) .attr('y1', 0) .attr('y2', h); ticks.exit().remove(); } var dats = [data, data3]; function next() { var it = dats.shift(); dats.push(it); drawdata(it, chart); } setInterval(next, 2000); next(); </script> </body> </html
3 個解決方案
解決方案1
3 2016-09-24 12:43:21
部分答案 ：對於網格線，使用大於width的值設置“輸入”和“退出”選擇：
<html> <head> <title>Chart</title> <style> path { stroke: #f00; } .line { stroke: #0f0; fill: none; stroke-width: 2px; } .rule { stroke: #ccc; stroke-width: 1px; } </style> </head> <body> <script src="https://d3js.org/d3.v3.min.js"></script> <script> var data = [ [0,2,3,2,8], [2,4,1,5,3], ]; var data2 = [ [0,1,2,3,4,5], [9,8,7,6,5,6], ]; var data3 = [ [1,3,2], [0,8,5], ]; var w = 300, h = 100; var chart = d3.select('body').append('div') .attr('class', 'chart') .append('svg:svg') .attr('width', w) .attr('height', h); var color = d3.scale.category10(); function drawdata(data, chart) { var num = data[0].length-1; var x = d3.scale.linear().domain([0, num]).range([0,w]); var y = d3.scale.linear().domain([0, 10]).range([h, 0]); var line = d3.svg.line().interpolate('basis') .x(function(d, i) { return x(i); }) .y(function(d) { return y(d); }); var flat = d3.svg.line() .x(function(d, i) { return x(i); }) .y(y(-1)); var lines = chart.selectAll('.line') .data(data); lines.enter().append('path') .attr('class', 'line') .style('stroke', function(d,i) { return color(i); }) .attr('d', line); lines.transition() .ease('linear') .duration(500) .attr('d', line); lines.exit().remove(); // legend var ticks = chart.selectAll('line') .data(x.ticks(num)); ticks.enter().append('line') .attr('x1', w+10) .attr('x2', w+10) .attr('y1', 0) .attr('y2', h) .attr('class', 'rule') .transition() .duration(500) .attr('x1', x) .attr('x2', x) .attr('y1', 0) .attr('y2', h); ticks.transition() .ease('linear') .duration(500) .attr('x1', x) .attr('x2', x) .attr('y1', 0) .attr('y2', h); ticks.exit().transition() .duration(500) .attr('x1', w+10) .attr('x2', w+10) .attr('y1', 0) .attr('y2', h) .remove(); } var dats = [data, data2, data3]; function next() { var it = dats.shift(); dats.push(it); drawdata(it, chart); } setInterval(next, 2000); next(); </script> </body> </html>
解決方案2
1 已采納 2016-09-26 20:46:46
我相信d3有一個更干凈的解決方案。 參見d3.svg.axis 。
var points0 = [ [1,8,8,8,8,8,8,8,8,8,8,8,8,8,8], [8,1,1,1,1,1,1,1,1,1,1,1,1,1,1], ]; var points1 = [ [1,1,1], [8,8,8], ]; var w = 500, h = 100; var chart = d3.select('body').append('div') .attr('class', 'chart') .append('svg') .attr('width', w) .attr('height', h) var color = d3.scale.category10(); function drawdata(data, svg) { var num = data[0].length-1; var x = d3.scale.linear().domain([0, num]).range([0,w]); var y = d3.scale.linear().domain([0, 10]).range([h, 0]); var line = d3.svg.line().interpolate('basis') .x(function(d, i) { return x(i); }) .y(function(d) { return y(d); }); var flat = d3.svg.line() .x(function(d, i) { return x(i); }) .y(y(-1)); var lines = chart.selectAll('path.line') .data(data); lines .enter() .append('path') .attr('class', 'line') .style('stroke', (d,i) => color(i)) lines // .attr('d', line) .transition() .ease('linear') .duration(500) .attrTween("d", function(d) { return pathTween(line(d), 4, this)}) lines .exit() .remove(); // legend var ticks = chart.selectAll('line') .data(x.ticks(num)); ticks.enter() .append('line') .attr('x1', w+10) // HACK .attr('x2', w+10) // HACK .attr('y1', 0) .attr('y2', h) .attr('class', 'rule') ticks.transition() .ease('linear') .duration(500) .attr('x1', x) .attr('x2', x) .attr('y1', 0) .attr('y2', h) ticks.exit().remove(); } const data = [points0, points1] setInterval(() => { const point = data[0] data.reverse() drawdata(point, chart) }, 1e3); function pathTween(d1, precision, path0) { var path1 = path0.cloneNode(), n0 = path0.getTotalLength(), n1 = (path1.setAttribute("d", d1), path1).getTotalLength(); // Uniform sampling of distance based on specified precision. var distances = [0], i = 0, dt = precision / Math.max(n0, n1); while ((i += dt) < 1) { distances.push(i); } distances.push(1); // Compute point-interpolators at each distance. var points = distances.map(function(t) { var p0 = path0.getPointAtLength(t * n0), p1 = path1.getPointAtLength(t * n1); return d3.interpolate([p0.x, p0.y], [p1.x, p1.y]); }); return function(t) { return "M" + points.map(function(p) { return p(t); }).join("L"); }; }
path { stroke: #f00; } .line { stroke: #0f0; fill: none; stroke-width: 2px; } .rule { stroke: #ccc; stroke-width: 1px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
解決方案3
1 2016-09-28 14:00:03
在d3中從單個折線圖到多折線圖的兩個數據集之間的過渡
[英]transition between two datasets, from a single line chart to a multiline chart, in d3
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.