d3.js展平嵌套数据

Question

总体来说，我对d3和js非常陌生。这是我的第一个项目。

我有一个具有以下结构的数据集（在将d3.nest与聚合函数结合使用之后）：

[
    {
        key: 1,
        values: [
            {
                key: 'Tucson International',
                values: {
                    avg_arr_delay : -2,
                    avg_dep_delay : -2,
                    coords : [489.4325699362896, 401.0612266917171]
                }
            },
            {
                key: 'Burbank-Glendale-Pasadena',
                values: {
                    avg_arr_delay : -4.25,
                    avg_dep_delay : -3,
                    coords : [385.86516356833704, 366.2906768310514]
                }
            },
            {
                key: 'Another Airport',
                values: {
                    avg_arr_delay : 5,
                    avg_dep_delay : 12,
                    coords : [325.86516356833704, 386.2906768310514]
                }
            }      
        ]
    },
    {
        key: 2,
        values: [
            {
                key: 'Tucson International',
                values: {
                    avg_arr_delay : 3,
                    avg_dep_delay : -1,
                    coords : [489.4325699362896, 401.0612266917171]
                }
            },
            {
                key: 'General Mitchell International',
                values: {
                    avg_arr_delay : 8.666,
                    avg_dep_delay : 1.3333,
                    coords : [811.193714171889, 209.73464395018792]
                }
            },
            {
                key: '...',
                values: {
                    avg_arr_delay : 1,
                    avg_dep_delay  : 1,
                    coords : [111.111, 222.222]
                }
            }        
        ]
    }, 
]

我想使用数据在具有cx=coords[0]，cy=coords[1]和r=avg_dep_delay的地图上绘制圆

我尝试使用以下代码访问它，但失败了。我只画了一个圆圈。

  svg.append('g')
    .attr('class','bubble')
    .selectAll('circle')
    .data(nested)
    .enter()
    .append('circle')
    .attr('cx', function(d,i) {
        return d.values[i].values.origin_coords[0]; 
        })
    .attr('cy', function(d,i) {
        return d.values[i].values.origin_coords[1]; 
        })
    .attr('r',5)
    .attr('class','dest_circle');

我想将数据更改为以下形状以使其正常工作。

[
    {
        Month: 1, 
        Airport: 'Tucson International', 
        avg_arr_delay : -2,  
        avg_dep_delay : -2, 
        coords : [489.4325699362896, 401.0612266917171]
    },
    {
        Month: 1, 
        Airport: 'Burbank-Glendale-Pasadena', 
        avg_arr_delay : -4.25,  
        avg_dep_delay : -3, 
        coords : [385.86516356833704, 366.2906768310514]
    },
    {
        Month: 1, 
        Airport: 'Another airport', 
        avg_arr_delay : 5,  
        avg_dep_delay : 12, 
        coords : [325.86516356833704, 386.2906768310514]
    },
    {
        Month: 2, 
        Airport: 'Tucson International', 
        avg_arr_delay : 3,  
        avg_dep_delay : -1, 
        coords : [489.4325699362896, 401.0612266917171]
    },
    {
        Month: 2, 
        Airport: 'General Mitchell International', 
        avg_arr_delay : 8.666,  
        avg_dep_delay : 1.333, 
        coords : [811.193714171889, 209.73464395018792]
    },
    {
        Month: 1, 
        Airport: '...', 
        avg_arr_delay : 1,  
        avg_dep_delay : 1, 
        coords : [111.111, 222.222]
    }
]

我发现以下帖子似乎是一个类似的问题，但无法使其正常运行StackOverflow Question。