D3 - 绘制多个形状

Question

我正在为两个平行四边形形状定义坐标，但只有第一个被渲染：

var shapeCoords = [
            [[10, 10], [100, 20], [100, 100], [10, 90]],
            [[10, 110], [100, 120], [100, 200], [10, 190]]
          ];
for(var i = 0; i <= 10; i+=10){ 
    path = svg.selectAll('path').data([shapeCoords[i*0.1]], function(d){        
        return [i, i+1, i+2, i+3]; //giving keys 0,1,2,3 and 10,11,12,13 repectively for each loop
        })
        .enter().append('svg:path').attr('d', function(d){
                        return line(d) + 'Z'
                        })
        .//some styles,etc;              
}//end for

根据 selectAll、data、enter 的 d3 cocepts，如果我分配不同的键，那么它应该已经呈现了。我错过了什么？

Answer 1

我们不需要循环数据数组进行数据连接，d3 为我们完成。

svg.selectAll('path').data(shapeCoords)
  .enter()
  .append('path')
  .attr('d', function(d){
    return line(d) + 'Z'
  })