Вложенные объекты JSON с Dimple.js

Question

Я пытаюсь создать сложную гистограмму с Dimple.JS и D3. Однако файл JSON, который я хочу использовать с этой конкретной визуализацией, включает вложенные объекты JSON (см. Ниже). Сложенная гистограмма, которую я хочу создать, имеет категорию канала как ее ось x, а ось y - совокупное количество разных местоположений (с каждым местом в виде «стека»). Вот исходные данные:

[{ 
    "channel": "politics", 
    "locations": 
    [{ 
     "name":"usa", 
     "count" : 1454 
     }, 
    { 
     "name":"mexico", 
     "count":3543 
     }, 
    { 
     "name":"antarctica", 
     "count":4352 
    }] 
}, 
{ 
    "channel": "economics", 
    "locations": 
    [{ 
     "name":"usa", 
     "count" : 12431 
     }, 
    { 
     "name":"mexico", 
     "count":314 
     }, 
    { 
     "name":"china", 
     "count":2321 
     }] 
}] 

Я сплющенные выше в поле ниже JSON, но у меня возникли проблемы с использованием .addSeries ямочка (в) метод для создания стека.

[ 
{ 
    "channel": "politics", 
    "locations[0].name": "usa", 
    "locations[0].count": 1454, 
    "locations[1].name": "mexico", 
    "locations[1].count": 3543, 
    "locations[2].name": "antarctica", 
    "locations[2].count": 4352 
}, 
{ 
    "channel": "economics", 
    "locations[0].name": "usa", 
    "locations[0].count": 12431, 
    "locations[1].name": "mexico", 
    "locations[1].count": 314, 
    "locations[2].name": "china", 
    "locations[2].count": 2321 
} 
] 

Мой вопрос заключается в следующем: как ямочка поддержку либо эти данные кодируются в данном файле JSON? Большинство образцов используют файлы CSV и TSV, но, к сожалению, я имею ограничение на использование только файлов JSON.

Answer 1

Dimple не может использовать вложенные данные. Вам придется сгладить его на стороне клиента, так что есть один объект JSON для каждый пересечение канала/местоположения. Вот пример того, как сделать это с Underscore.js:.

var chartData = _.chain(data) 
.map(function(row, index){ 
    // for each original row, return a new row for each location 
    return _.map(row.locations, function(location){ 
    return { 
     'channel' : row.channel, 
     'name' : location.name, 
     'count' : location.count 
    }; 
    }); 
}) 
.flatten() 
.value(); 

(для каждой строки в исходном наборе данных, он возвращает три строки, по одному для каждого местоположения Это будет возвращать массив вложенных массивов, . поэтому он вызывает flatten, чтобы сделать весь массив уровень 1 глубокий)

Вот такой jsBin показывает, что в действии: http://jsbin.com/nuvihu/edit?html,js,output

(выход):

Если это помогает, вот данные, которые выглядят так:

[{"channel":"politics","name":"usa","count":1454},{"channel":"politics","name":"mexico","count":3543},{"channel":"politics","name":"antarctica","count":4352},{"channel":"economics","name":"usa","count":12431},{"channel":"economics","name":"mexico","count":314},{"channel":"economics","name":"china","count":2321}]