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的d3 cocepts，输入，如果我指定不同的键，那么它应该已经被渲染。我错过了什么？

Answer 1

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

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

D3 - 绘制多个形状

1 个答案: