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

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

21 голосов
/ 06 марта 2012

У меня есть очень простой пример 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; });

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

Ответы [ 2 ]

33 голосов
/ 06 марта 2012

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

2 голосов
/ 27 марта 2012

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

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.

...