Uso de una matriz asociativa como datos para D3

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

Parece que no consigo mostrar nada con este método. En cambio, tengo que insertar una tarea en el medio: lea los datos en una matriz asociativa, copie esos datos en una matriz simple y luego muestre el gráfico de barras con 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; usando una matriz simple como intermediario. ¿Hay alguna forma especial de iterar sobre una matriz asociativa en lugar de una matriz estándar?

Fuente

2012-03-06 Crummy

Según la información incluida, la función chart.data no acepta un objeto javascript (también conocido como "matriz asociativa"). Si este es el caso, entonces no tiene más remedio que convertir a una matriz. – jbabey

No se llaman matrices asociativas en JavaScript. Tiendo a colgarme de esta terminología porque generalmente las personas que usan la matriz asociativa lo declaran como una matriz, como PHP. –

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

Fuente

2012-03-06 18:39:39

Esta solución no funcionó por completo, pero me dirigió en la dirección correcta. Al reemplazar ".data (géneroAssociative)" por ".data (d3.values (géneroAssociative))" pude obtener datos que se muestran correctamente, aunque desafortunadamente esto pierde información clave (por lo que no puedo mostrar la clave como texto, para ejemplo). – Crummy

¿Intentó utilizar '.data (d3.entries (genreAssociative))'? –

Sí, pero luego tengo acceso a las claves y no a los valores. En mi gráfico de barras quiero los valores para la longitud de la barra y las claves para las etiquetas. – Crummy

Encontré que para que la generación de gráficos de barras funcione bien, el siguiente formato funciona mejor. Está basado en el formato CSV D3 post-analizado.

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.

Fuente

2012-03-27 02:08:30

Uso de una matriz asociativa como datos para D3

Respuesta

Cuestiones relacionadas