title: D3 Multi-Series Line Chart with ZOOM
body: <p>Apologies for the newbie question here. I'm trying to reproduce this example <a href="https://bl.ocks.org/mbostock/3884955" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/3884955</a> with some data on online influencers (essentially drawing many lines) but with an scroll zoom in order to isolate parts of the data. Sounds simple enough, but I can't seem to get it to function!</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>&lt; svg width = "960"
  height = "500" &gt; &lt; /svg&gt;
  &lt;script src="/ / d3js.org / d3.v4.min.js "&gt;&lt;/script&gt;
  &lt;script&gt;
  
  var svg = d3.select("svg"),
      margin = {top: 20, right: 80, bottom: 30, left: 100},
      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 zoom = d3.zoom()
      .scaleExtent([1, 32])
      .translateExtent([[0, 0], [width, height]])
      .extent([[0, 0], [width, height]])
      .on("zoom", zoomed);
  
  var xAxis = d3.axisBottom(x),
      yAxis = d3.axisLeft(y);
  
  var parseTime = d3.timeParse(" % d / % m / % Y ");
  
  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.engagement); });
  
  d3.csv("stack2.csv", type, function(error, data) {
    if (error) throw error;
  
    var influencers = data.columns.slice(1).map(function(id) {
      return {
        id: id,
        values: data.map(function(d) {
          return {date: d.date, engagement: d[id]};
        })
      };
    });
  
  
    x.domain(d3.extent(data, function(d) { return d.date; }));
  
    y.domain([d3.min(influencers, function(c) { 
         return d3.min(c.values, function(d) { 
             return d.engagement; }); }),
   d3.max(influencers, function(c) { 
         return d3.max(c.values, function(d) { 
             return d.engagement; }); })
    ]);
  
    z.domain(influencers.map(function(c) { return c.id; }));
  
    g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0, " + height + ")")
        .call(d3.axisBottom(x));
  
    g.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(y))
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 5)
        .attr("dy", "0.71em")
        .attr("fill", "#000")
        .text("Engagement");
  
   var influ = g.selectAll(".influ")
    .data(influencers)
    .enter().append("g")
    .attr("class", "influ");
  
  influ.append("path")
    .attr("class", "line")
    .attr("d", function(d) {
      return line(d.values);
    })
    .style("stroke", "lightgrey")
    .on("mouseover", function(d, i) {
      d3.select(this).transition()
        .style("stroke", function(d) {
          return z(d.id);
        })
        .style("stroke-width", 3)
      console.log(d.id);
    })
    .on("mouseout", function(d) {
      d3.select(this).transition()
        .style("stroke", "lightgrey")
        .style("stroke-width", 1)
    })
  
  
  influ.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.engagement) + ")";
    })
    .attr("x", 3)
    .attr("dy", ".35em")
    .style("opacity", 0.7)
    .style("font", "10px sans-serif")
    .text(function(d) {
      return d.id;
    });
  
  svg.call(zoom)
  
  });
  
  function type(d, _, columns) {
    d.date = parseTime(d.date);
    for (var i = 1, n = columns.length, c; i &lt; n; ++i) d[c = columns[i]] = +d[c];
    return d;
  }
  
  function zoomed() {
    var t = d3.event.transform,
      xt = t.rescaleX(x);
    g.selectAll("path.line").attr("d", function(d) {
      return xt(d.date);
    });
    g.select(".axis--x").call(xAxis.scale(xt));
  }
  
  &lt; /script&gt;
  </code></pre>
  
  <p>I think the problem is isolated to this part:</p>
  
  <pre><code>function zoomed() {
    var t = d3.event.transform,
      xt = t.rescaleX(x);
    g.selectAll("path.line").attr("d", function(d) {
      return xt(d.date);
    });
    g.select(".axis--x").call(xAxis.scale(xt));
  }
  </code></pre>
  
  <p>The Axis zoom is fine, but i don't think I'm calling the data for the line graphs correctly. I think g.selectAll definitely selects the lines, as they disappear on scroll... so I am assuming that <code>.attr("d", function(d) {return xt(d.date);</code> is wrong. Anyone have any tips?</p>