grid - Agregar cuadrícula al gráfico de líneas D3.js

linechart

Question

Tengo este gráfico de líneas aquí:

jsfiddle.net/yfqQ4/

Mi problema ahora es que no obtengo una cuadrícula adecuada en segundo plano trabajando con una leyenda (yy x-Axis) como esta: http://lab.creativebrains.net/linechart.png

¿Alguien puede enviarme un fragmento de código sobre cómo debo implementarlo o algo así?

¡Gracias!

Answer 1

Sugeriría usar d3.svg.axis (). Scale () para atar la grilla a sus coordenadas. Dibujé un ejemplo rápido basado en tu código: http://jsfiddle.net/yfqQ4/5/

Lo esencial es usar las escalas existentes, x e y, y usar las marcas como cuadrícula. Tenga en cuenta que la height y el width son las variables que definen el tamaño de su contenedor. Aquí está el código relevante:

var numberOfTicks = 6;

var yAxisGrid = d3.svg.axis().scale(y)
  .ticks(numberOfTicks) 
  .tickSize(width, 0)
  .tickFormat("")
  .orient("right");

var xAxisGrid = d3.svg.axis().scale(x)
  .ticks(numberOfTicks) 
  .tickSize(-height, 0)
  .tickFormat("")
  .orient("top");

svg.append("g")
  .classed(''y'', true)
  .classed(''axis'', true)
  .call(yAxisGrid);

svg.append("g")
  .classed(''x'', true)
  .classed(''axis'', true)
  .call(xAxisGrid);

Answer 2

Puedes dibujar una grilla de fondo como esta:

//vertical lines
svg.selectAll(".vline").data(d3.range(26)).enter()
    .append("line")
    .attr("x1", function (d) {
    return d * 20;
})
    .attr("x2", function (d) {
    return d * 20;
})
    .attr("y1", function (d) {
    return 0;
})
    .attr("y2", function (d) {
    return 500;
})
    .style("stroke", "#eee");

// horizontal lines
svg.selectAll(".vline").data(d3.range(26)).enter()
    .append("line")
    .attr("y1", function (d) {
    return d * 20;
})
    .attr("y2", function (d) {
    return d * 20;
})
    .attr("x1", function (d) {
    return 0;
})
    .attr("x2", function (d) {
    return 500;
})
    .style("stroke", "#eee");

Puede ver aquí cómo funciona con su jsfiddle (actualizado): http://jsfiddle.net/cuckovic/Phzvy/