如何使图形滚动水平以跟上传入的数据？

Question

下图是我程序的当前输出，基本上可以正常工作。问题是，它从左到右绘制图形，绘制它接收的JSON数据，然后离开屏幕边缘（或进入位桶），当我想要的是图形滚动到左边随着JSON数据的消耗。您可以看到数据已超过＆＃34; 9＆＃34;标签

我不确定从哪里开始这样做，并希望得到一些建议。

当前输出：

function createLineChart(data, number) {
    var xy_chart = d3_xy_chart()
      .width(960)
      .height(500)
      .xlabel("TCS")
      .ylabel("STATUS");
    var svg = d3.select(".lineChart" + number).append("svg")
      .datum(data)
      .call(xy_chart);

    function d3_xy_chart() {
      var width = 640,
      height = 480,
      xlabel = "X Axis Label",
      ylabel = "Y Axis Label";


      function chart(selection, svg) {
        selection.each(function (datasets) {

//
// Create the plot.

          var margin = {top: 20, right: 80, bottom: 30, left: 50},
          innerwidth = width - margin.left - margin.right,
          innerheight = height - margin.top - margin.bottom;


          var x_scale = d3.scale.linear()
            .range([0, innerwidth])
            .domain([d3.min(datasets, function (d) {
              return d3.min(d.x);
            }),
            d3.max(datasets, function (d) {
              return d3.max(d.x);
            })]);

// Set y scale

          var y_scale = d3.scale.linear()
            .range([innerheight, 0])
            .domain([d3.min(datasets, function (d) {
              return d3.min(d.y);
            }),
            d3.max(datasets, function (d) {
              return d3.max(d.y);
            })]);

          var color_scale = d3.scale.category10()
            .domain(d3.range(datasets.length));

          var x_axis = d3.svg.axis()
            .scale(x_scale)
            .orient("bottom")
            .tickFormat(function (d, i) {

// Remove remove decimal points and set values again to the x axis

              if (d % 1 == 0) {
                return parseInt(d)

              } else {
                return "  "

              }

            });

          var y_axis = d3.svg.axis()
            .scale(y_scale)
            .orient("left")
            .tickFormat(function (d, i) {

              if (d == "1") {
                return "NOT EXECUTED"
              } else if (d == "2") {
                return "FAILED"
              } else if (d == "3") {
                return "PASSED"
              } else {
               return "  "
              }

            });

          var x_grid = d3.svg.axis()
            .scale(x_scale)
            .orient("bottom")
            .tickSize(-innerheight)
            .tickFormat("");

          var y_grid = d3.svg.axis()
            .scale(y_scale)
            .orient("left")
            .tickSize(-innerwidth)
            .tickFormat("");

// Draw the line

         var draw_line = d3.svg.line()
           .interpolate("linear")
           .x(function (d) {
              return x_scale(d[0]);
           })
          .y(function (d) {
              return y_scale(d[1]);
           });

         var svg = d3.select(this)
           .attr("width", width)
           .attr("height", height)
           .append("g")
           .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Append g as x grid to svg

         svg.append("g")
           .attr("class", "x grid")
           .attr("transform", "translate(0," + innerheight + ")")
           .call(x_grid);

         svg.append("g")
           .attr("class", "y grid")
           .call(y_grid);

        svg.append("g")
           .attr("class", "x axis")
           .attr("transform", "translate(0," + innerheight + ")")
           .call(x_axis)
           .append("text")
           .attr("dy", "-.71em")
           .attr("x", innerwidth)
           .style("text-anchor", "end")
           .text(xlabel);

// Append g as x axis to svg

        svg.append("g")
           .attr("class", "y axis")
           .call(y_axis)
           .append("text")
           .attr("transform", "rotate(-90)")
           .attr("y", 6)
           .attr("dy", "0.71em")
           .style("text-anchor", "end")
           .text(ylabel);

         var data_lines = svg.selectAll(".d3_xy_chart_line")
           .data(datasets.map(function (d) {
                return d3.zip(d.x, d.y);
            }))
           .enter().append("g")
           .attr("class", "d3_xy_chart_line");


            data_lines.append("path")
            .attr("class", "line")
            .attr("d", function (d) {
                return draw_line(d);
            })
            .attr("stroke", function (_, i) {
                 return color_scale(i);
           });

// Set label texts

           data_lines.append("text")
           .datum(function (d, i) {
               return {name: datasets[i].label, final: d[d.length - 1]};
            })
            .attr("transform", function (d) {
               return ( "translate(" + x_scale(d.final[0]) + "," +
              y_scale(d.final[1]) + ")" );
            })
           .attr("x", 3)
           .attr("dy", ".35em")
           .attr("fill", function (_, i) {
               return color_scale(i);
           })
           .text(function (d) {
              return d.name;
           });


        });
    }

     chart.width = function (value) {
      if (!arguments.length) return width;
        width = value;
        return chart;
     };

     chart.height = function (value) {
       if (!arguments.length) return height;
       height = value;
       return chart;
     };

     chart.xlabel = function (value) {
      if (!arguments.length) return xlabel;
        xlabel = value;
        return chart;
     };

     chart.ylabel = function (value) {
      if (!arguments.length) return ylabel;
       ylabel = value;
       return chart;
     };

     return chart;
    }


    }