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.

  • es.davy.ai/
  • Programación /
  • Javascript hace que un nuevo Elemento en el Array aparezca en un índice diferente después de arr.push (no en el índice arr.length esperado).

Javascript hace que un nuevo Elemento en el Array aparezca en un índice diferente después de arr.push (no en el índice arr.length esperado).

17 Jun, 2023 Programación

Tengo un Array que se llama tareas.
Allí tengo muchas tareas almacenadas.
Ejemplo:

[
{
“id”: “2”,
“taskName”: “dswrs”,
“startDate”: “1969-12-31T23:00:00.000Z”,
“endDate”: “1969-12-31T23:00:55.000Z”,
“duration”: “1969-12-31T23:00:55.000Z”,
“categorie”: “Procesando”
},
{
“id”: “1”,
“taskName”: “A”,
“startDate”: “1969-12-31T23:00:30.000Z”,
“endDate”: “1969-12-31T23:00:55.000Z”,
“duration”: “1969-12-31T23:00:25.000Z”,
“categorie”: “Procesando”
}
]
Aquí ya puede ver mi problema. Agregué el elemento con id:2 después del elemento con id:1 (con tasks.push (…))
Así que espero que esté en este orden:

[
{
“id”: “1”,
“taskName”: “A”,
“startDate”: “1969-12-31T23:00:30.000Z”,
“endDate”: “1969-12-31T23:00:55.000Z”,
“duration”: “1969-12-31T23:00:25.000Z”,
“categorie”: “Procesando”
},
{
“id”: “2”,
“taskName”: “dswrs”,
“startDate”: “1969-12-31T23:00:00.000Z”,
“endDate”: “1969-12-31T23:00:55.000Z”,
“duration”: “1969-12-31T23:00:55.000Z”,
“categorie”: “Procesando”
}
]
Este problema solo aparece cuando el nuevo elemento agregado tiene un startDate menor que los elementos que ya existen.
El problema debe estar en mi código D3.js, que uso para mostrar datos en un gráfico de gantt. Espero estar en la función gantt.redraw, porque lo llamo directamente después de agregar nuevos datos a mi matriz de tareas, pero simplemente no puedo encontrar el problema.

/* global d3 */

d3.gantt = function () {

var initTimeDomain = function (tasks) {
console.log(tasks);
if (timeDomainMode === FIT_TIME_DOMAIN_MODE) {
if (tasks === undefined || tasks.length < 1) {
timeDomainStart = new Date(0);
timeDomainEnd = new Date(10 ** 5);
return;
}
var tasksOrder = tasks;
tasksOrder.sort(function (a, b) {
return a.endDate – b.endDate;
});
timeDomainEnd = tasksOrder[tasksOrder.length – 1].endDate;
tasksOrder.sort(function (a, b) {
return a.startDate – b.startDate;
});
timeDomainStart = tasksOrder[0].startDate;
}
};

    function gantt (tasks) {
        initTimeDomain();
        initAxis();

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

        svg.selectAll('.chart')
            .data(tasks, keyFunction).enter()
            .append('rect')
            .attr('rx', 5)
            .attr('ry', 5)
            .attr('class', function (d) {
                if (taskCategorie[d.categorie] == null) { return 'bar-killed'; }
                return taskCategorie[d.categorie];
            })
            .attr('y', 0)
            .attr('transform', rectTransform)

            .attr('height', function (d) { return y.bandwidth(); })
            .attr('width', function (d) {
                return (x(d.endDate) - x(d.startDate));
            });

        svg.append('g')
            .attr('class', 'x axis')
            .attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')')
            .transition()
            .call(xAxis);

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

        return gantt;
    };

    gantt.redraw = function (tasks) {
        console.log("TAREAS EN REDRAW:")
        console.log(tasks);
        initTimeDomain(tasks);
        initAxis();

        var svg = d3.select('svg');

        var ganttChartGroup = svg.select('.gantt-chart');
        var rect = ganttChartGroup.selectAll('rect').data(tasks, keyFunction);

        var div = d3.select('body').append('div')
            .attr('class', 'tooltip-donut')
            .style('opacity', 0);

        rect.enter()
            .insert('rect', ':first-child')
            .on('mouseover', function (d, i) {
                d3.select(this).transition()
                    .duration('50')
                    .attr('opacity', '.
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para mantener el orden de tareas en el gráfico de Gantt de D3.js

    El problema de mantener el orden de tareas en el gráfico de Gantt de D3.js se puede resolver ordenando el array de tareas antes de pasarlo a las funciones del gráfico de Gantt. La clasificación se puede hacer en función del campo “startDate” o “id” según sea necesario.

    Para ordenar el array de tareas en función del campo “startDate”, se puede usar el siguiente código:

    tasks.sort(function(a, b) {
  return new Date(a.startDate) - new Date(b.startDate);
});

    Para ordenar el array de tareas en función del campo “id”, se puede utilizar el siguiente código:

    tasks.sort(function(a, b) {
  return a.id - b.id;
});

    El código anterior se puede llamar antes de pasar el array de tareas a las funciones del gráfico de Gantt.

    Además, la función initTimeDomain() en el código del gráfico de Gantt se puede modificar para ordenar el array de tareas en función de los campos “startDate” y “endDate” antes de calcular el rango del dominio de tiempo.

    var initTimeDomain = function (tasks) {
  if (timeDomainMode === FIT_TIME_DOMAIN_MODE) {
    if (tasks === undefined || tasks.length < 1) {
      timeDomainStart = new Date(0);
      timeDomainEnd = new Date(10 ** 5);
      return;
    }
    tasks.sort(function (a, b) {
      return new Date(a.startDate) - new Date(b.startDate);
    });
    timeDomainStart = tasks[0].startDate;
    tasks.sort(function (a, b) {
      return new Date(a.endDate) - new Date(b.endDate);
    });
    timeDomainEnd = tasks[tasks.length - 1].endDate;
  }
};

    Al utilizar el código anterior, el array de tareas se clasifica antes de pasarlo a las funciones del gráfico de Gantt y el rango del dominio de tiempo se calcula ordenando el array de tareas en función de los campos “startDate” y “endDate”. Esto asegura que las tareas se muestren en el orden correcto en el gráfico de Gantt.

Comments are closed.