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 Вопрос .