es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Gráfico de línea en JavaScript d3 con eje ordinal y datos en formato json.

27 Jul, 2023 Programación

Soy nuevo en la creación de gráficos con d3 e intento construir un gráfico de líneas con un eje ordinal. He logrado visualizar correctamente los ejes y, pero no soy capaz de crear la línea.

Tengo este código:

var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var data = [{
    name: "cat",
    value: 10
}, {
    name: "dog",
    value: 3
}, {
    name: "pig",
    value: 7
}, {
    name: "bird",
    value: 7
}];

//añade el objeto svg al cuerpo de la página
var svg = d3.select("#div-svg").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 + ')');

//establece las escalas
var xScale = d3.scaleBand()
    .domain(d3.extent(data, function(d){return d["name"]}))
    .range([0, width]);
var yScale = d3.scaleLinear()
    .domain([min(this.value_array), max(this.value_array)])
    .range([height, 0]);

//añade los ejes
svg.append('g')
    .attr('transform', 'translate(0,' + height + ')')
    .call(d3.axisBottom(xScale));

svg.append('g')
    .call(d3.axisLeft(yScale));

//línea
var line = d3.line()
    .x(function(d) { return xScale(d[0]); }) 
    .y(function(d) { return yScale(d.value); })

Hasta aquí todo funciona bien. La siguiente parte es la que no funciona.

 //línea
    var line = d3.line()
        .x(function(d) { return xScale(d[0]); }) 
        .y(function(d) { return yScale(d.value); })

Si pongo d[0] obtengo el siguiente error “El tipo número no se puede asignar al parámetro de tipo cadena”. Si pongo d.name obtengo el siguiente error “‘name’ no existe en el tipo [número, número]”. No sé cómo proceder para mostrar el gráfico. ¿Tienes alguna solución?

Además, me gustaría que fuera un gráfico de área, no solo una línea, en caso de que el procedimiento cambie.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para crear un gráfico de líneas con un eje ordinal utilizando d3.js, puedes seguir los siguientes pasos:

    1. Define las variables de margen, ancho y altura:
    var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
    1. Crea un conjunto de datos:
    var data = [{
    name: "gato",
    value: 10
}, {
    name: "perro",
    value: 3
}, {
    name: "cerdo",
    value: 7
}, {
    name: "pájaro",
    value: 7
}];
    1. Define el elemento SVG y establece sus dimensiones:
    var svg = d3.select("#div-svg").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 + ')');
    1. Define las escalas del eje x y del eje y:
    var xScale = d3.scaleBand()
    .domain(data.map(function(d) { return d.name; }))
    .rangeRound([0, width]);

var yScale = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) { return d.value; })])
    .range([height, 0]);
    1. Añade el eje x y el eje y al elemento SVG:
    svg.append('g')
    .attr('transform', 'translate(0,' + height + ')')
    .call(d3.axisBottom(xScale));

svg.append('g')
   .call(d3.axisLeft(yScale));
    1. Define la función de la línea:
    var line = d3.line()
    .x(function(d) { return xScale(d.name); })
    .y(function(d) { return yScale(d.value); });
    1. Añade el elemento de la ruta al elemento SVG:
    svg.append('path')
    .datum(data)
    .attr('class', 'line')
    .attr('d', line);

    Para convertirlo en un gráfico de área, puedes utilizar la función d3.area() para definir la ruta del área y la función d3.curveLinear() para suavizar la ruta de la línea. Así es cómo puedes modificar el código para crear un gráfico de área:

    1. Define la función de área:
    var area = d3.area()
    .x(function(d) { return xScale(d.name); })
    .y0(yScale(0))
    .y1(function(d) { return yScale(d.value); })
    .curve(d3.curveLinear);
    1. Añade el elemento de la ruta al elemento SVG:
    svg.append('path')
    .datum(data)
    .attr('class', 'area')
    .attr('d', area);

    Esto debería crear un gráfico de área con un eje x ordinal y un eje y lineal.

Comments are closed.