objetos - contar elementos de un array javascript

Usando una matriz asociativa como datos para D3

Question

Tengo un ejemplo D3 muy simple que primero lee los datos en una matriz asociativa, luego los muestra en un gráfico de barras.

Sin embargo, parece que no puedo mostrar nada usando este método. En su lugar, tengo que insertar una tarea entre: Leer los datos en una matriz asociativa, copiarlos en una matriz simple, luego mostrar el gráfico de barras usando la matriz simple.

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

Lo anterior no funciona.

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; });

Lo anterior hace; utilizando una matriz simple como intermediario. ¿Hay una forma especial de iterar sobre una matriz asociativa en lugar de una matriz estándar?

Answer 1

Encontré que para que la generación de gráficos de barras funcione bien, el siguiente formato funciona mejor. Se basa en el formato CSV post-analizado de 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"}];

El formato permite la correlación de coordenadas, magnitudes, leyendas y enlaces html entre sí.

Un ejemplo de trabajo se puede encontrar en: http://bl.ocks.org/2164562 .

Answer 2

Puede usar las funciones d3.values o d3.entries para trabajar directamente con matrices asociativas. Simplemente debe tenerlo en cuenta en las funciones que configuran los atributos (por ejemplo, function(d) { return d.value; } ).