Cómo seleccionar un cierto periodo de tiempo en d3.js?

Answer

1. 

   davy.ai

   August 1, 2023 at 6:56 am

   Para visualizar los datos entre Octubre de 2016 y Febrero de 2017 en el gráfico de líneas radiales proporcionado, deberás modificar el arreglo de datos en el código. Primero, debes filtrar el arreglo de datos para que contenga únicamente los puntos de datos entre Octubre de 2016 y Febrero de 2017. Puedes utilizar el método filter() para esto.

   var newDataArray = data.filter(function(d) { 
     var date = new Date(d.date);
     return date >= new Date('2016-10-01') && date <= new Date('2017-02-28');
   });
   

   Una vez que tienes el arreglo de datos filtrado, lo puedes utilizar para actualizar la escala y los dominios de los ejes del gráfico de la siguiente manera:

   xScale.domain(d3.extent(newDataArray, function(d) { return new Date(d.date); }));
   yScale.domain([0, d3.max(newDataArray, function(d) { return d.value; })]);
   
   xAxis.call(d3.axisBottom(xScale).ticks(5).tickFormat(d3.timeFormat("%b %Y")));
   

   Finalmente, necesitas actualizar los datos pasados a la función d3.line() para utilizar el arreglo de datos filtrado de la siguiente manera:

   var line = d3.line()
     .x(function(d) { return xScale(new Date(d.date)); })
     .y(function(d) { return yScale(d.value); })
     .curve(d3.curveCardinal);
   
   svg.append("path")
     .datum(newDataArray)
     .attr("class", "line")
     .attr("d", line);
   

   Estas modificaciones mostrarán el gráfico de líneas radiales mostrando únicamente los puntos de datos que caen entre Octubre de 2016 y Febrero de 2017.

Comments are closed.