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
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"
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
Vous devez vous connecter pour publier un commentaire.
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
etavailableVolumeCapacity
propriétés sur un objet qui n'akey
etvalues
propriétés.Il y a finalement deux approches pour résoudre ce problème:
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:
Utiliser deux appels imbriqués
forEach
:Vous aurez besoin de passer par toutes les utilisations de
d
(en particulierd.key
) eti
dans l'intérieur de la fonction (dont le corps j'ai omis par souci de concision) pour voir si vous avez besoin d'incorporerd2
eti2
. Par exemple, vous souhaitez peut-être utiliserd2.key + " " + d.key
au lieu ded.key
.OriginalL'auteur Luke Woodward
Lorsque vous définissez votre chemin:
vous êtes en utilisant ce qui a été donné dans le tutoriel, mais chaque élément dans
dataNest
ne dispose pas d'unvalues
propriété..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 unvalues
de la propriété. Le contenu dedataNest
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
sousd3.nest
). À l'aide dedataNest.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
ety
fonctions sont de recevoir.OriginalL'auteur chazsolo