xxxxxxxxxx<meta charset="utf-8"><style>.axis--x path { display: none;}.line { fill: none; stroke: steelblue; stroke-width: 1.5px;}</style><svg width="960" height="500"></svg><script src="//d3js.org/d3.v4.min.js"></script><script>var svg = d3.select("svg"), margin = {top: 20, right: 80, bottom: 30, left: 50}, width = svg.attr("width") - margin.left - margin.right, height = svg.attr("height") - margin.top - margin.bottom, g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");var parseTime = d3.timeParse("%Y%m%d");var x = d3.scaleTime().range([0, width]), y = d3.scaleLinear().range([height, 0]), z = d3.scaleOrdinal(d3.schemeCategory10);var line = d3.line() .curve(d3.curveBasis) .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.temperature); });d3.tsv("data.tsv", type, function(error, data) { if (error) throw error; var cities = data.columns.slice(1).map(function(id) { return { id: id, values: data.map(function(d) { return {date: d.date, temperature: d[id]}; }) }; }); x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([ d3.min(cities, function(c) { return d3.min(c.values, function(d) { return d.temperature; }); }), d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.temperature; }); }) ]); z.domain(cities.map(function(c) { return c.id; })); var visibleCities = {}; for (var i in cities) { var id = cities[i].id; visibleCities[id] = true; } function isVisible(cityId) { return visibleCities[cityId]; } function toggleVisibility(cityId) { visibleCities[cityId] = !visibleCities[cityId]; } var xAxis = d3.axisBottom(x); g.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("fill", "#000") .text("Temperature, ºF"); var city = g.selectAll(".city") .data(cities) .enter().append("g") .attr("class", "city") .attr("clipPath", "url(#clip)") ; var zoom = d3.zoom() .scaleExtent([1 / 4, 8]) .translateExtent([[-width, -Infinity], [2 * width, Infinity]]) .on("zoom", zoomed); var zoomRect = svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "none") .attr("pointer-events", "all") .call(zoom); var xGroup = g.append("g") .attr("transform", "translate(0," + height + ")"); function zoomed() { var xz = d3.event.transform.rescaleX(x); xGroup.call(xAxis.scale(xz)); //cityPath.attr("d", line.x(function(d) { return xz(d.values); })) line.x(function (d) { return xz(d.date); }); cityPath.attr("d", function(d) { return line(d.values); }) } g.append("clipPath") .attr("id", "clip") .append("rect") .attr("width", width) .attr("height", height); function highlightPath(d) { if (!isVisible(d.id)) return; d3.selectAll(".city path") .filter(function (e) { return e == d; }) .style("stroke-width", 3); d3.selectAll(".city path") .filter(function (e) { return d != e; }) .style("stroke", "lightgrey"); d3.selectAll(".city path") .sort(function (a, b) { // bring to front if (a != d) return -1; else return 1; }); } function colorPathsNormally() { d3.selectAll(".city path") .style("stroke", function(e) { return z(e.id); }) .style("stroke-width", 1); } var cityPath = city.append("path") .attr("class", "line") .attr("clip-path", "url(#clip)") .attr("d", function(d) { return line(d.values); }) .style("stroke", function(d) { return z(d.id); }) .style("stroke-width", 1) /* .on("mouseover", function(d) { highlightPath(d); }) .on("mouseout", function(d) { colorPathsNormally(); }) */ ; city.append("text") .datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; }) .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; }) .attr("x", 3) .attr("dy", "0.35em") .style("font", "10px sans-serif") .style("cursor", "pointer") .text(function(d) { return d.id; }) .on("click", function(d) { toggleVisibility(d.id); d3.selectAll(".city path") .filter(function(e) { return d.id == e.id; }) .style("opacity", isVisible(d.id) ? 1 : 0); if (!isVisible(d.id)) { colorPathsNormally(); } }) .on("mouseover", function(d) { d3.selectAll(".city path") .filter(function(e) { return e.id == d.id; }) .each(function(e) { highlightPath(e); }); }) .on("mouseout", function(d) { colorPathsNormally(); }) ; var xExtent = d3.extent(data, function(d) { return d.date; }); zoom.translateExtent([[x(xExtent[0]), -Infinity], [x(xExtent[1]), Infinity]]) zoomRect.call(zoom.transform, d3.zoomIdentity);});function type(d, _, columns) { d.date = parseTime(d.date); for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c]; return d;}</script> https://d3js.org/d3.v4.min.js