使用d3在多个svg容器中嵌套多个rects？

var svg1 = d3.select("#container1").append("svg");
var svg2 = d3.select("#container2").append("svg");

svg1.attr("width", 500)
    .attr("height", 300);

svg2.attr("width", 500)
    .attr("height", 300);

var data1 = [10, 20, 30, 40, 50];
var data2 = [50, 40, 30, 20, 10];

var rects1 = svg1.selectAll("rect")
    .data(data1)
    .enter()
    .append("rect")
    .attr("x", function(d, i) { return i * 50; })
    .attr("y", function(d) { return 300 - d; })
    .attr("width", 40)
    .attr("height", function(d) { return d; })
    .attr("fill", "blue");

var rects2 = svg2.selectAll("rect")
    .data(data2)
    .enter()
    .append("rect")
    .attr("x", function(d, i) { return i * 50; })
    .attr("y", function(d) { return 300 - d; })
    .attr("width", 40)
    .attr("height", function(d) { return d; })
    .attr("fill", "red");