Использование ассоциативного массива в качестве данных для 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; });

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


javascript d3.js associative-array
person Malcolm Crum    schedule 06.03.2012    source источник
comment
из включенной информации видно, что функция chart.data не принимает объект javascript (также известный как ассоциативный массив). Если это так, то у вас нет другого выбора, кроме как преобразовать в массив.   -  person jbabey    schedule 06.03.2012
comment
В JavaScript они не называются ассоциативными массивами. Я склонен зацикливаться на этой терминологии, потому что обычно люди, которые используют ассоциативный массив, объявляют его как массив, как в PHP.   -  person Juan Mendes    schedule 19.12.2015

Ответы (2)


arrow_upward
33
arrow_downward

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

person Lars Kotthoff    schedule 06.03.2012
comment
Это решение не совсем сработало, но оно указало мне правильное направление. Заменив .data(genreAssociative) на .data(d3.values(genreAssociative)) я смог правильно отображать данные, хотя, к сожалению, при этом теряется ключевая информация (например, я не могу отображать ключ в виде текста). - person Malcolm Crum; 06.03.2012
comment
Вы пробовали использовать .data(d3.entries(genreAssociative))? - person Lars Kotthoff; 06.03.2012
comment
Да, но тогда у меня есть доступ к ключам, а не к значениям. В моей гистограмме мне нужны значения длины столбца и ключи для меток. - person Malcolm Crum; 07.03.2012
comment
d3.entries() возвращает массив, в котором каждый элемент имеет элементы key и value. Таким образом вы должны иметь возможность получать как ключи, так и значения. - person Lars Kotthoff; 07.03.2012
comment
Вот и все! Большое спасибо! Это научит меня читать документацию внимательнее в следующий раз. - person Malcolm Crum; 07.03.2012

arrow_upward
2
arrow_downward

Я обнаружил, что для того, чтобы создание гистограммы работало хорошо, лучше всего подходит следующий формат. Он основан на формате 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.

person Information Technology    schedule 27.03.2012