Использование ассоциативного массива в качестве данных для D3

У меня очень простой пример D3, который сначала считывает данные в ассоциативный массив, а затем отображает его в гистограмме.

Кажется, я не могу ничего показать, используя этот метод. Вместо этого мне нужно вставить задачу между ними: Прочитать данные в ассоциативный массив, скопировать эти данные в простой массив, а затем отобразить гистограмму с помощью простого массива.

chart.selectAll("div")
     .data(genreAssociative)
     .enter().append("div")
     .style("width", function(d) { return d * 10 + "px"; })
     .text(function(d) { return d; });

Вышеуказанное не работает.

genreSimple = [];
for (var genre in genreAssociative) genreSimple.push(genreAssociative[genre]);         
chart.selectAll("div")
     .data(genreSimple)
     .enter().append("div")
     .style("width", function(d) { return d * 10 + "px"; })
     .text(function(d) { return d; });

Вышеизложенное делает; используя простой массив в качестве посредника. Есть ли специальный способ итерации по ассоциативному массиву вместо стандартного массива?

Ответы

Ответ 1

Вы можете использовать функции d3.values ​​ или d3.entries для работы непосредственно с ассоциативными массивами. Вам просто нужно учесть это в функциях, которые устанавливают атрибуты (например, function(d) { return d.value; }).

Ответ 2

Я обнаружил, что для того, чтобы генерация диаграммы столбцов хорошо работала, лучший формат работает в следующем формате. Он основан на формате DSP после анализа CSV.

var dataSet1 = [
  {xCoordinate: "Legend String 1", magnitude: 54, link: "http://www.if4it.com"},
  {xCoordinate: "Legend String 2", magnitude: 21, link: "http://www.if4it.com/glossary.html"},
  {xCoordinate: "Legend String 3", magnitude: 31, link: "http://www.if4it.com/resources.html"},
  {xCoordinate: "Legend String 4", magnitude: 14, link: "http://www.if4it.com/taxonomy.html"},
  {xCoordinate: "Legend String 5", magnitude: 19, link: "http://www.if4it.com/disciplines.html"},
  {xCoordinate: "Legend String 6", magnitude: 47, link: "http://www.if4it.com"},
  {xCoordinate: "Legend String 7", magnitude: 27, link: "http://www.if4it.com/glossary.html"}];

Формат позволяет соотносить координаты, величины, легенды и html-ссылки друг с другом.

Рабочий пример можно найти по адресу: http://bl.ocks.org/2164562.