javascript - pensamientos - pensamiento cientifico en los niños

D3.js vincula un objeto a los datos y se agrega a cada clave

Question

Soy un novato de D3.js y estoy aprendiendo a jugar con los datos.

Digamos que tengo un objeto con nombres como claves, y cada clave tiene una matriz de números como esta:

var userdata = {
    ''John'' : [0, 1, 3, 9, 8, 7],
    ''Harry'': [0, 10, 7, 1, 1, 11],
    ''Steve'': [3, 1, 4, 4, 4, 17],
    ''Adam'' : [4, 77, 2, 13, 11, 13]
};

Para cada usuario, me gustaría añadir un objeto SVG y luego trazar la línea con la matriz de valores para ese usuario.

Así que aquí está mi suposición de cómo se vería eso en base a los tutoriales, pero sé que es incorrecto. Esto es para mostrar mi conocimiento limitado y para entender mejor lo que estoy haciendo:

Primero debería crear la línea

var line = d3.svg.line().interpolate(''basis'');

Luego quiero vincular los datos a mi cuerpo y anexar un elemento svg para cada clave:

d3.select(''body'')
    .selectAll(''svg'')
    .data(userdata)
    .enter()
    .append(''svg'')
    .append(line)
    .x(function(d, i) { return i; })
    .y(function(d) { return d[i]; });

Entonces, ¿estoy cerca?

Answer 1

Aquí hay otro ejemplo similar al de mbeasley: http://jsfiddle.net/2N2rt/15/ que agrega ejes, colores y voltea el gráfico con el lado derecho hacia arriba. Primero, masajeé tus datos solo un poco. Funciona mejor si tiene una matriz de valores y utilicé las teclas para facilitar el acceso a las propiedades de name y values .

var data = [
    {name: ''John'', values: [0,1,3,9, 8, 7]},
    {name: ''Harry'', values: [0, 10, 7, 1, 1, 11]},
    {name: ''Steve'', values: [3, 1, 4, 4, 4, 17]},
    {name: ''Adam'', values: [4, 77, 2, 13, 11, 13]}
];

En general, en d3 configura el gráfico de esta manera, que determina el tamaño del gráfico real y los márgenes circundantes.

var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 640 - margin.left - margin.right,
    height = 380 - margin.top - margin.bottom;

Luego puede crear sus escalas en función de sus datos. Aunque no es necesario crearlos, hacen que los elementos de posicionamiento en el gráfico sean mucho más fáciles al convertir los valores en puntos. El domain son los valores mínimo y máximo que tienen sus datos, mientras que el range son los valores mínimo y máximo del tamaño de su gráfico. Tenga en cuenta que el range para el y axis se invierte que pone (0,0) en la esquina inferior izquierda (generalmente 0 para el eje y está en la parte superior).

var x = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.values.length - 1; })])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([d3.min(data, function(d) { return d3.min(d.values); }),
             d3.max(data, function(d) { return d3.max(d.values); })])
    .range([height, 0]);

d3 tiene un par de características para crear automáticamente escalas de color para usted. Simplemente configúrelo con las teclas que desea usar y la cantidad de colores (creo que hay 10 y 20 opciones de color).

var color = d3.scale.category10()
    .domain(d3.keys(data[0]).filter(function(key) { return key === "name"; }));

Aquí usamos nuestras escalas para configurar los ejes xey. Hay muchas opciones diferentes para los ejes. TickFormat es útil para cambiar el aspecto de los ticks, d3.format tiene muchas opciones diferentes, por lo que rara vez tiene que crear un formateador personalizado.

var xAxis = d3.svg.axis()
    .scale(x)
    .tickFormat(d3.format(''d''))
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

Aquí creamos una función reutilizable que sabe cómo dibujar una línea. Pasaremos cada punto de datos para cada persona a la función de línea más adelante. Tenga en cuenta que d contiene el conjunto actual de valores que estamos graficando i es el índice de los valores actuales dentro de nuestra matriz de datos original.

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d, i) { return x(i); })
    .y(function(d, i) { return y(d); });

Finalmente, podemos comenzar a agregar elementos a nuestro gráfico, primero creando y posicionando el elemento svg principal.

var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

A continuación, agregando cada eje.

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

Agregamos un grupo ( g ) para cada persona y asociamos los datos con el grupo. Usaremos esta información cuando dibujemos las líneas. Proporcionamos una class para que podamos diseñar el gráfico más tarde si queremos.

  var people = svg.selectAll(".people")
      .data(data)
    .enter().append("g")
      .attr("class", "people");

Luego, finalmente dibuja las líneas para cada persona.

  people.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return color(d.name); });

Usé tus datos para responder a otra pregunta sobre dibujar una grilla cuando tienes valores negativos. Puede ver ese gráfico en http://jsfiddle.net/2y3er/2/ .

Answer 2

Yo diría que vas en la dirección correcta. Esto es lo que haría (pero sé que no hay una sola forma de hacerlo):

// your user data
var userdata = {
    ''John'' : [0, 1, 3, 9, 8, 7],
    ''Harry'': [0, 10, 7, 1, 1, 11],
    ''Steve'': [3, 1, 4, 4, 4, 17],
    ''Adam'' : [4, 77, 2, 13, 11, 13]
}; 

// add your main SVG block
var svg = d3.select(''body'')
    .append(''svg'')
    .attr(''width'', 400)
    .attr(''height'', 200)
    .attr(''id'', ''chart'');

// add an SVG group element for each user
var series = svg.selectAll(''g.series'')
    .data(d3.keys(userdata))
    .enter()
    .append(''g'')
    .attr(''class'', ''series'');

// create your line generator
var line = d3.svg.line()
    .interpolate(''basis'')
    .x(function(d, i) {
        return i*40; // *40 just to increase the chart size
    })
    .y(function(d) {
        return d*3; // *3 for the same reason
    });

// add a line for each user using your SVG grouping 
var lineSVG = series.selectAll(''.line'')
    .data(d3.keys(userdata))
    .enter()
    .append(''svg:path'')
    .attr(''d'', function(d) {
        return line(userdata[d]);  
    })
    .attr(''class'',''line'');

Aquí hay una demostración del código anterior.

También recomiendo que lea este artículo , ya que realmente ayuda a solidificar la forma en que funciona d3.