d3.js：在同一图表中缩放多行时出现问题

Question

我对d3.js很陌生，目前正致力于绘制具有缩放功能的时间序列。我能够让代码在图表上缩放一行，但是一旦我添加另一行（破折号中的参考线），该行保持静止。

我尝试了一些变化，我试图在“zoom（）”函数中调用这些行，但无济于事。

以下是jsfiddle的链接，因为查看示例可能会让您更好地了解我的意思：

https://jsfiddle.net/adityap16/x78zgwux/14/

还附上了代码：

var data = [{
  "mytime": "2015-12-01T23:10:00.000Z",
  "value": 64
}, {
  "mytime": "2015-12-01T23:15:00.000Z",
  "value": 67
}, {
  "mytime": "2015-12-01T23:20:00.000Z",
  "value": 70
}, {
  "mytime": "2015-12-01T23:25:00.000Z",
  "value": 64
}, {
  "mytime": "2015-12-01T23:30:00.000Z",
  "value": 72
}, {
  "mytime": "2015-12-01T23:35:00.000Z",
  "value": 75
}, {
  "mytime": "2015-12-01T23:40:00.000Z",
  "value": 71
}, {
  "mytime": "2015-12-01T23:45:00.000Z",
  "value": 80
}, {
  "mytime": "2015-12-01T23:50:00.000Z",
  "value": 83
}, {
  "mytime": "2015-12-01T23:55:00.000Z",
  "value": 86
}, {
  "mytime": "2015-12-02T00:00:00.000Z",
  "value": 80
}, {
  "mytime": "2015-12-02T00:05:00.000Z",
  "value": 85
}];
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse;

data.forEach(function(d) {
  d.mytime = parseDate(d.mytime);
});
//var margin = { top: 30, right: 30, bottom: 40, left:50 },
var margin = {
    top: 30,
    right: 30,
    bottom: 40,
    left: 50
  },
  height = 200,
  width = 900;
var color = "green";
var xaxis_param = "mytime";
var yaxis_param = "value";
var params1 = {
  margin: margin,
  height: height,
  width: width,
  color: color,
  xaxis_param: xaxis_param,
  yaxis_param: yaxis_param
};

draw_graph(data, params1);

function draw_graph(data, params) {

  var make_x_axis = function() {
    return d3.svg.axis()
      .scale(x_scale)
      .orient("bottom")
      .ticks(5);
  };

  var make_y_axis = function() {
    return d3.svg.axis()
      .scale(y_scale)
      .orient("left")
      .ticks(5);
  };

  //Get the margin
  var xaxis_param = params.xaxis_param;
  var yaxis_param = params.yaxis_param;
  var color_code = params.color;
  var margin = params.margin;
  var height = params.height - margin.top - margin.bottom,
    width = params.width - margin.left - margin.right;

  var x_extent = d3.extent(data, function(d) {
    return d[xaxis_param]
  });

  var y_extent = d3.extent(data, function(d) {
    return d[yaxis_param]
  });

  var x_scale = d3.time.scale()
    .domain(x_extent)
    .range([0, width]);

  var y_scale = d3.scale.linear()
    .domain([0, y_extent[1]])
    .range([height, 0]);

  var zoom = d3.behavior.zoom()
    .x(x_scale)
    .y(y_scale)
    .on("zoom", zoomed);


  //Line
  var line = d3.svg.line()
    .defined(function(d) {
      return d[yaxis_param];
    })
    .x(function(d) {
      return x_scale(d[xaxis_param]);
    })
    .y(function(d) {
      return y_scale(d[yaxis_param]);
    });

  var lineRef = d3.svg.line()
    .x(function(d) {
      return x_scale(d[xaxis_param]);
    })
    .y(function(d) {
      return y_scale(20);
    });

  var myChart = d3.select('body').append('svg')
    .attr('id', 'graph')
    .style('background', '#E7E0CB')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
    .call(zoom);

   myChart.append("svg:rect")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "plot");


  var legend = myChart.append("g")
    .attr("class", "legend")
    .attr("transform", "translate(" + 5 + "," + (height - 25) + ")")

  legend.append("rect")
    .style("fill", color_code)
    .attr("width", 20)
    .attr("height", 20);

  legend.append("text")
    .text(yaxis_param)
    .attr("x", 25)
    .attr("y", 12);


  var vAxis = d3.svg.axis()
    .scale(y_scale)
    .orient('left')
    .ticks(5)


  var hAxis = d3.svg.axis()
    .scale(x_scale)
    .orient('bottom')
    .ticks(5);

  var majorAxis = d3.svg.axis()
    .scale(x_scale)
    .orient('bottom')
    .ticks(d3.time.day, 1)
    .tickSize(-height)
    .outerTickSize(0);

  myChart.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(hAxis);

  myChart.append("g")
    .attr("class", "x axis major")
    .attr("transform", "translate(0," + height + ")")
    .call(majorAxis);

  myChart.append("g")
    .attr("class", "y axis")
    .call(vAxis);

    var clip = myChart.append("svg:clipPath")
    .attr("id", "clip")
    .append("svg:rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", width)
    .attr("height", height);

    var chartBody = myChart.append("g")
    .attr("clip-path", "url(#clip)");



chartBody.append("svg:path")
    .datum(data)
    .attr('class', 'line')
    .attr("d", line)
    .attr('stroke', color_code)
    .attr('stroke-width', 1)
    .attr('fill', 'none');

  chartBody
    .append('svg:path')
    .datum(data)
    .attr('class', 'line')
    .attr("d", lineRef)
    .attr('stroke', 'blue')
    .attr('stroke-width', 1)
    .style("stroke-dasharray", ("3, 3"))
    .attr('fill', 'none');

  function zoomed() {
    myChart.select(".x.axis").call(hAxis);
    myChart.select(".y.axis").call(vAxis);
    myChart.select(".x.axis.major").call(majorAxis);
    myChart.select('path.line').attr('d', lineRef); 
    myChart.select('path.line').attr('d', line);

  }
}

我还想知道如何放大或缩小如果不是鼠标翻转，我可以选择那部分数据，然后通过刷牙https://bl.ocks.org/mbostock/1667367

但我想在没有第二张图的情况下制作它。

谢谢！