animated lines with broken zoom

forked from atomiccc's block: animated lines with broken zoom

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    #linechart {
	    height: 500px;
	    width: 500px;
	    margin: 0 auto;
    }
    
  </style>
</head>

function num(max) {
	return Math.abs(Math.floor(Math.random() * max) + (max - 200));
}

var data = [
	{ date: '2015-09-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2015-10-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2015-11-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2015-12-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-01-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-02-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-03-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-04-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-05-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-06-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-07-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-08-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-09-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-10-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-11-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2016-12-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-01-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-02-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-03-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-04-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-05-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-06-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-07-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-08-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
	{ date: '2017-09-01', similarityRed: num(100), similarityOrange: num(200), similarityYellow: num(300), similarityBlue: num(400), similarityGreen: num(700) },
];

var svg = d3.select('#linechart').append('svg').attr('height', '500px').attr('width', '500px');

var xExtent = d3.extent(data, function(d, i) { return d.date; });

var yValues = [];

data.forEach(function(d) {
	for (key in d) {
		if (key !== 'date') {
			yValues.push(d[key]);
		}
	}	
});

var yMin = d3.min(yValues, function(d, i) { return d; });
var yMax = d3.max(yValues, function(d, i) { return d; });

var xScale = d3.scaleTime()
	.domain([ new Date(xExtent[0]), new Date(xExtent[1]) ])
	.range([40,495]);

var yScale = d3.scaleLinear()
	.domain([yMin, yMax])
	.range([460,240]);

var xAxis = d3.axisBottom(xScale).ticks(5);
var yAxis = d3.axisLeft(yScale);

var gX = svg.append('g')
	.attr('id', 'xAxisG')
	.attr('transform', 'translate(0,460)')
	.call(xAxis);

var gY = svg.append('g')
	.attr('id', 'yAxisG')
	.attr('transform', 'translate(40,0)')
	.call(yAxis);

var color = d3.scaleOrdinal()
    .range(['#FF4848', '#FF9C42', '#FFF06A', '#24E0FB', '#36F200']);

// var path, line;
var lines = {};

for (key in data[0]) {

if (key !== 'date') {

var line = d3.line()
			.x(function(d) {
				return xScale(new Date(d.date));
			})
			.y(function(d) {
				return yScale(d[key]);
			})
			.curve(d3.curveCatmullRom.alpha(0.5));

lines[key] = line;

path = svg.append('g').append('path')
			.attr('d', line(data))
			.attr('id', key)
			.attr('fill', 'none')
			.attr('stroke', function(d) { return color(key); }) //'#36F200')
			.attr('stroke-width', 2);

var totalLength = path.node().getTotalLength();

path
			.attr("stroke-dasharray", totalLength + " " + totalLength)
			.attr("stroke-dashoffset", totalLength)
			.transition()
			.duration(2000)
		    .ease(d3.easeCubicInOut)
			.attr("stroke-dashoffset", 0);

}

var zoom = d3.zoom()
    .scaleExtent([1, 40])
    .on("zoom", zoomed);

svg.call(zoom);

function zoomed() {
  console.log('zoomed');
  // debugger;
  // svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  // svg.attr("transform", d3.event.transform);
  gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
  // gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));
  // debugger;
  for (key in data[0]) {
  	if (key !== 'date') {
  		svg.select('#' + key).attr('transform', d3.event.transform);
  		// svg.select('#' + key).attr('d', lines[key](data));

}
  }
}
  </script>
</body>

https://d3js.org/d3.v4.min.js