Appel de données spécifiques dans un tableau créé avec rollup avec d3.js

Question

Je travaille actuellement sur une visualisation des données d'expédition et j'essaye de créer un graphique linéaire où le xAxis est 00:00 à 23:59 sur un jour spécifique et le yAxis est le nombre de navires à une minute spécifique au cours de cette journée. J'ai réussi à créer un tableau qui contient 1440 objets (un pour chaque minute). Chaque objet de ce tableau se présente comme suit:

Object with data at 00:00 hours

Object with data at 00:01 hours

C'est l'extrait de code que j'utilise pour créer ledit réseau.

var \t shipTotal = d3.nest() 
 
    .key(function(d) { 
 
    return d.Timestamp; 
 
    }) 
 
    .sortKeys(d3.ascending) 
 
    .rollup(function(d){ 
 
    return d3.sum(d, function(g) { 
 
    return +g.Enen; 
 
    }); 
 
}) 
 

 
.entries(data);

plus tard dans mon code, je tente de créer une variable de ligne où X est l'horodatage dans mon jeu de données principal et le Y est la valeur dans le tableau que j'ai créé, qui est le montant de navires à cette minute spécifique.

var \t lijn1 = d3.line() 
 
    .x(function(d){ 
 
    return xScale(shipTotal[d.key]); 
 
    }) 
 
    .y(function(d, value){ 
 
    return yScale(shipTotal[d.value]); 
 
    });

Je comprends que le X est faux plus probable aussi bien, mais la ligne dans le code n'a pas X ni coordonnée Y. Dans le navigateur Web de la console la ligne montre d = "mnan, NaNLNaN, NaNLNaN ... fois 1440.

Enfin, l'extrait de code où j'ajouter le chemin.

chartGroup.append("path") 
 
.data([shipTotal]) 
 
.attr("class", "lijntje1") 
 
.attr("d", lijn1(shipTotal \t)) 
 
.attr("stroke", "red") 
 
.attr("fill", "none");

Si quelqu'un pouvait m'aider ici, ce serait génial Je peux fournir plus d'informations si nécessaire

Answer 1

Avertir: il y a beaucoup de choses manquantes dans les extraits pour savoir si c'est le seul problème, mais de toute façon --->

shipTotal sera un tableau d'objets de la forme {key: a_key, value: data_for_that_key}, pas un objet lui-même. Vous ne pouvez donc pas accéder à ShipTotal par une clé telle que "00:01", juste par un index: 0-1439 dans votre cas. Heureusement, .sortKeys(d3.ascending) signifie que vos données sont déjà triées par les clés de type 00:01, et que vous avez déjà transmis shipTotal à la fonction de ligne de votre dernier extrait (.attr("d", lijn1(shipTotal))). Vous n'avez donc pas besoin de référencer shipTotal dans l'extrait d3.line de toute façon. Essayez ceci:

var lijn1 = d3.line() 
    // d at this point should be an individual {key: ..., value: ...} element of the shiptotal array 
    .x(function(d, i){ 
    // assuming xScale domain is set on [00:00, 00:01, 00:02 etc] type keys, 
    // if it's 0-1439, try xScale(i) instead 
    return xScale(d.key); 
    }) 
    .y(function(d){ 
    return yScale(d.value); 
    });