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/