如何在D3中生成多个多线图面板？

var svg1 = d3.select("#container1")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var svg2 = d3.select("#container2")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var xScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.x; })])
  .range([0, width]);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.y; })])
  .range([height, 0]);

var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

var line = d3.line()
  .x(function(d) { return xScale(d.x); })
  .y(function(d) { return yScale(d.y); });

svg1.append("path")
  .datum(data1)
  .attr("class", "line")
  .attr("d", line);

svg2.append("path")
  .datum(data2)
  .attr("class", "line")
  .attr("d", line);

svg1.append("g")
  .attr("class", "x-axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg1.append("g")
  .attr("class", "y-axis")
  .call(yAxis);

svg2.append("g")
  .attr("class", "x-axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg2.append("g")
  .attr("class", "y-axis")
  .call(yAxis);