title: Multiple Y axis and paths in different scales
body: <p>I have data in structure <code>{time, value1, value2}</code>. On axis x (bottom) i have <code>time</code> and i have two axis Y with range of min/max values of <code>value1</code> and <code>value2</code>. I draw two paths for that values. The problem is that my second path (for <code>value2</code>) is drawn in a fragment on not visible area because of min/max values (<code>.domain</code>, <code>d3.extent</code>) for <code>value1</code> and <code>value2</code> are different ([25,130] and [0,65]). How to draw a path for <code>value2</code> that is assigned to second axis ? I don't want to change a domains. I hope You know what i mean. Code and picture below.</p>
  
  <p><img src="https://i.stack.imgur.com/i5wfE.png" alt="enter image description here"></p>
  
  <pre><code>var x = d3.time.scale()
      .range([0, width]);
  var y = d3.scale.linear()
      .range([height, 0]);    
  var y2 = d3.scale.linear()
      .range([height, 0]);
  
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");   
  var yAxis2 = d3.svg.axis()
      .scale(y2)
      .orient("left");
  
  var line = d3.svg.line()
      .x(function(d) { return x(d.time); })
      .y(function(d) { return y(d.value1); });
  
  var line2 = d3.svg.line()
      .x(function(d) { return x(d.time); })
      .y(function(d) { return y(d.value2); });
  
  d3.json('/data.json', function(error, data){
  
        x.domain(d3.extent(data, function(d) { return d.time; }));
        y.domain(d3.extent(data, function(d) { return d.value1; })); // [25, 130]
        y2.domain(d3.extent(data, function(d) { return d.value2; })); // [0, 65]
  
  
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
  
        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
          .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Value1");
  
        svg.append("g")
            .attr("class", "y2 axis")
            .attr("transform", "translate(-40,0)") // second axis a little to the left
            .call(yAxis2)
          .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Value2");
  
        /**
         * datum ?
         */
        svg.append("path")
            .datum(data)
            .attr("class", "line")
            .attr("d", line);
  
        svg.append("path")
            .datum(data)
            .attr("class", "line2")
            .attr("d", line2);
  
  });
  </code></pre>