Cargando datos D3.js desde una cadena JSON simple

La mayoría de los ejemplos en la galería cargan datos de archivos TSV.

¿Cómo puedo convertir lo siguiente para usar una variable json local en lugar de datos de TSV?

d3.tsv("data.tsv", function(error, data) { var myEntitiesJson = getEntitiesJson(); // <------ use this instead of "data" data.forEach(function(d) { d.frequency = +d.frequency; }); x.domain(data.map(function(d) { return d.letter; })); y.domain([0, d3.max(data, function(d) { return d.frequency; })]); ... svg.selectAll(".bar") .data(data) // <----- bind to myEntities instead } 

Por lo que puedo decir, solo necesito hacer algo con mis entidades Json, para poder hacer data-fy para que el gráfico pueda vincularse.

ACTUALIZAR

Estoy progresando. Conecté mis entidades de JSON y el gráfico está comenzando a tomar forma.

Actualmente se rompe el siguiente código:

 svg.selectAll(".bar") .data(myEntities) // <-- this is an array of objects .enter().append("rect") 

Esto está causando:

Error: valor no válido para el atributo y = “NaN”

Error: valor no válido para el atributo height = “NaN”

para datos remotos.jsustituir:

 d3.tsv("data.tsv", function(error, data) {...} 

con :

 d3.json("data.json", function(error, data) { console.log(data); // this is your data }); 

para datos locales:

 var myData = { {date:'2013-05-01', frequency:99}, {date:'2013-05-02', frequency:24} }; function draw(data) { console.log(data); // this is your data } draw(myData); 

No hay una forma simple de datos-cualquier JSON dado, porque no todos los objetos json tienen la misma forma .

Por forma, me refiero a la forma en que se organizan los datos. Por ejemplo, tanto '{"foo" : 1, "bar" : 2}' y '{"names" : ["foo", "bar"], "values" : [1, 2]}' podrían usarse para almacenar los mismos datos, pero uno almacena todo en un objeto en el que las claves del objeto corresponden a los nombres de los puntos de datos, y uno utiliza matrices separadas para almacenar nombres y valores, con las entradas correspondientes que tienen un índice de matriz común.

Sin embargo, hay un proceso general que puede pasar para convertir JSON en datos. Primero, necesitarás analizar tu json. Esto se puede hacer con el objeto JSON estándar de JavaScript. USe JSON.parse(myJson) para obtener datos de su objeto json si ya está cargado en el cliente. d3.json(my/json/directory, fn(){}) puede cargar y analizar tu json, por lo que si lo estás cargando en otro lugar de tu servidor, esta podría ser una mejor forma de convertir el json en un objeto .

Una vez que tenga su JSON empaquetado en un objeto javascript, aún necesita datos-fy, que es la parte que dependerá de sus datos. Lo que espera d3 es alguna forma de matriz: [dataPoint1, dataPoint2, ...] . Para los dos ejemplos que di más arriba, la matriz que desearía sería algo como esto:

 [{'name' : 'foo', 'value' : 1}, {'name' : 'bar', 'value' : 2}] 

Tengo un elemento en mi matriz para cada punto de datos, con dos atributos: value y name . (En tu ejemplo, querrías los atributos letter y frequency )

Para cada uno de mis ejemplos, usaría una función diferente para crear la matriz. Con esta línea en común:

 var rawData = JSON.parse(myJson); 

Mi primer json podría estar lleno de esta función:

 var key; var data = []; for(key in rawData){ if(rawData.hasOwnProperty(key)){ data.push({'name' : key, 'value' : rawData[key]}); } } 

Para el segundo ejemplo, me gustaría recorrer cada atributo de mi objeto, names y values . Mi código podría verse así:

 var i; var data = []; for(i = 0; i < rawData.names.length; i++){ data.push({'name' : rawData.names[i], 'value' : rawData.values[i]}); } 

Ambos darán una versión de datos de mi JSON original que luego puedo usar en d3.

Para D3js v2 o v3 (no estoy seguro de cuál).

Declara tu conjunto de datos

 var dataset = { "first-name": "Stack", "last-name": "Overflow", }; // JSON object var dataset = [ 5, 10, 15, 20, 25 ]; // or array 

Según lo declarado por el documento , puede usar:

una matriz de números u objetos, o una función que devuelve una matriz de valores

Enlazar

 d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text("New paragraph!"); 

Más explicación en el tutorial D3 de Scott Murray # Datos de enlace .

La función de datos () se aplica a una selección, se puede encontrar más información en la documentación oficial: selection.data ([values ​​[, key]]) .

Puede cambiar el json en un archivo javascript que asigna los datos a un valor global. Tomando https://bl.ocks.org/d3noob/5028304 como un ejemplo:

De:

  

A:

   

Tenga en cuenta que hemos eliminado la necesidad de callback.

El archivo json era "sankeygreenhouse.json":

 { "links": [ {"source":"Agricultural Energy Use","target":"Carbon Dioxide","value":"1.4"}, 

Ahora, en "graphData.js":

 var graph = { "links": [ {"source":"Agricultural Energy Use","target":"Carbon Dioxide","value":"1.4"}, 

Simplemente cambie los datos a una matriz de objetos como este:

 let data = [{"apples":53245,"oranges":200},{"apples":28479,"oranges":200},{"apples":19697,"oranges":200},{"apples":24037,"oranges":200},{"apples":40245,"oranges":200}] 

y comentar el d3.tsv("data.tsv", function(error, data) {...