Erreur: <path> attribut d: nombre Prévu, “MNaN,NaNLNaN,NaN

Je suis tring pour créer un multi-ligne graphique à l'aide d'D3.js v4. Je suis l'aide de cet exemple: https://bl.ocks.org/mbostock/3884955.

Échantillon de Données csv:

storageSystem,poolId,availableVolumeCapacity,date
system01,0,18031398,20170413
system01,1,15626268,20170413
system01,2,61256286,20170413
system01,3,119514990,20170413
system02,0,15046668,20170413
system02,1,12486558,20170413
system02,2,12303396,20170413
system03,0,35171335,20170413
system03,1,17263722,20170413
system01,0,18031387,20170414
system01,1,15626257,20170414
system01,2,61256275,20170414
system01,3,119514989,20170414
system02,0,15046657,20170414
system02,1,12486547,20170414
system02,2,12303385,20170414
system03,0,35171324,20170414
system03,1,17263711,20170414

Objet De Données:

0: Object
  color: "#8c564b"
  key: "system03"
  values: Array(2)
    0: Object
      key: "0"
      values: Array(23)
        0: Object
          availableVolumeCapacity: 35171335
          date: Thu Apr 13 2017 00:00:00 GMT+0000 (Coordinated Universal Time)
          poolId: "0"
          storageSystem: "system03"
    1: Object
      key: "1"
      values: Array(23)
        0: Object
          availableVolumeCapacity: 17263722
          date: Thu Apr 13 2017 00:00:00 GMT+0000 (Coordinated Universal Time)
          poolId:"1"
          storageSystem: "system03"

D3.js Code:

var svg = d3.select("svg")
m = {top: 20, right: 20, bottom: 50, left: 20},
w = svg.attr("width") - m.left - m.right,
h = svg.attr("height") - m.top - m.bottom,
g = svg.append("g").attr("transform", "translate(" + m.left + "," + m.top + ")");
var parseTime = d3.timeParse("%Y%m%d");
var x = d3.scaleTime().range([0, w]),
y = d3.scaleLinear().range([h, 0]),
z = d3.scaleOrdinal(d3.schemeCategory10);
var line = d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.availableVolumeCapacity); });
d3.csv("ssystem.csv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.date = parseTime(d.date);
d.availableVolumeCapacity = +d.availableVolumeCapacity;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.availableVolumeCapacity; })]);
var dataNest = d3.nest()
.key(function(d) {return d.storageSystem; })
.key(function(d) {return d.poolId; })
.entries(data);
console.log(dataNest)
legendSpace = w/dataNest.length;
dataNest.forEach(function(d,i) {
svg.append("path")
.attr("class", "line")
.style("stroke", function() {
return d.color = z(d.key); })
.attr("id", 'tag'+d.key.replace(/\s+/g, ''))
.attr("d", line(d.values));
svg.append("text")
.attr("x", (legendSpace/2)+i*legendSpace)
.attr("y", h + (m.bottom/2)+ 5)
.attr("class", "legend")
.style("fill", function() {
return d.color = z(d.key); })
.on("click", function(){
//Determine if current line is visible
var active = d.active ? false : true,
newOpacity = active ? 0 : 1;
//Hide or show the elements based on the ID
d3.select("#tag"+d.key.replace(/\s+/g, ''))
.transition().duration(100)
.style("opacity", newOpacity);
//Update whether or not the elements are active
d.active = active;
})
.text(d.key);
});
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + h + ")")
.call(d3.axisBottom(x));
svg.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("Capacity (MB)");
});

Je vois l'erreur suivante 4 fois à partir de la console:

Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN".
(anonymous) @ d3.v4.min.js:205
ul @ d3.v4.min.js:3768
al @ d3.v4.min.js:3775
(anonymous) @ multi-line.js:51
(anonymous) @ multi-line.js:45
(anonymous) @ d3.v4.min.js:5857
call @ d3.v4.min.js:3622
e @ d3.v4.min.js:5840

Toute aide est très appréciée.

Est-il une raison pour laquelle vous êtes à l'aide de d3.nest? L'exemple que vous avez un lien à ne pas utiliser d3.nest.
L'exemple que j'ai posté n'utilisez pas de nid, mais la relation de données, je suis en utilisant des besoins. Voici une relative post qui donne plus d'informations sur mes données.
Ok, merci pour ça, mais ce n'est pas 100% clair pour moi ce que vous voulez le graphique ressembler. Devrait-il y avoir une ligne pour chaque combinaison de système de stockage et de la piscine?
Je suis en train de graphique une ligne par pool de chaque système de stockage. Par exemple, "system03" doit avoir deux lignes pour poolId "0" & "1"

OriginalL'auteur Clarkus978 | 2017-05-05

d3.js javascript

5

La racine de votre problème, c'est que la valeur d dans votre fonction anonyme transmise à dataNest.forEach contient toujours un niveau d'imbrication mais vous l'utilisez comme si il n'y a pas de nidification. Votre code ne fonctionne pas car il est à la recherche d' date et availableVolumeCapacity propriétés sur un objet qui n'a key et values propriétés.

Il y a finalement deux approches pour résoudre ce problème:
1. Utiliser une touche de fonction qui associe à la fois le système de stockage et d'ID de pool. Cela réduit la nidification à un seul niveau:
```
var dataNest = d3.nest()
.key(function(d) { return d.storageSystem + " " + d.poolId; })
.entries(data);
```
2. Utiliser deux appels imbriqués forEach:
```
dataNest.forEach(function(d2,i2) {
d2.forEach(function (d,i) {
svg.append("path")
//.... rest of inner function omitted
});
});
```
  Vous aurez besoin de passer par toutes les utilisations de d (en particulier d.key) et i dans l'intérieur de la fonction (dont le corps j'ai omis par souci de concision) pour voir si vous avez besoin d'incorporer d2 et i2. Par exemple, vous souhaitez peut-être utiliser d2.key + " " + d.key au lieu de d.key.
OriginalL'auteur Luke Woodward
2

Lorsque vous définissez votre chemin:
```
svg.append("path")
.attr("class", "line")
.style("stroke", function() {
return d.color = z(d.key); })
.attr("id", 'tag'+d.key.replace(/\s+/g, ''))
.attr("d", line(d.values)); //d.values here is not defined
```
vous êtes en utilisant ce qui a été donné dans le tutoriel, mais chaque élément dans dataNest ne dispose pas d'un values propriété.

Merci @chazsolo je l'ai changé pour .attr("d", line); et qui fixe les erreurs de la console. Il y a maintenant un nouveau problème en ce que toutes les lignes sur le graphe de chevauchement. C'est comme si elles partagent toutes les mêmes données.
hmm, à tout hasard, vous pouvez obtenir un exemple de travail sur jsFiddle, ou quelque chose de similaire?
De messagerie unifiée, chaque élément dataNest a en effet un values de la propriété. Le contenu de dataNest est dans la question en vertu de "l'Objet de Données'.
Voici un lien
l'interlocuteur est à l'aide de deux niveaux d'imbrication (c'est à dire les deux appels à .key sous d3.nest). À l'aide de dataNest.forEach déballe un de ces niveaux. L'erreur vient de ce que l' line fonction est passée de données avec un niveau d'imbrication toujours appliquée, et ce n'est pas ce que l' x et y fonctions sont de recevoir.

OriginalL'auteur chazsolo

Vous devez vous connecter pour publier un commentaire.