Erreur: <path> attribut d: Nombre attendu, "MNaN, 25.707269548 ...

Question

Avant de poster, j'ai regardé ce SO question qui avait le même problème, et je suis sûr que la solution est similaire à la sienne, mais je suis nouveau sur d3 donc je ne sais pas comment résoudre le mien.

Je suis en train de modifier un graphique d3 afin qu'il lit à partir d'un flux json au lieu du fichier csv. le graphique est basé sur cette bl.ocks.org link.

donc Je essentiellement créé un WCF service qui retourne exactement les mêmes données que les données du CSV le flux retourné ressemble à ceci:.

[ 
    {"date":"6/1/2017","sales":1394.46}, 
    {"date":"6/2/2017","sales":1366.42}, 
    {"date":"6/3/2017","sales":1498.58} 
] 

Mon d3 tableau qui ressemble à ceci:

//d3.csv("sp500.csv", type, function(error, data) { 
d3.json("http://MyServer:86/Erase.svc/GetDataErase", function(error, data) { 
    console.log(data); 
    if (error) throw error; 

    x.domain(d3.extent(data, function(d) { return d.date; })); 
    y.domain([0, d3.max(data, function(d) { return d.sales; })]); 
    x2.domain(x.domain()); 
    y2.domain(y.domain()); 

    focus.append("path") 
     .datum(data) 
     .attr("class", "area") 
     .attr("d", area); 

    focus.append("g") 
     .attr("class", "axis axis--x") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    focus.append("g") 
     .attr("class", "axis axis--y") 
     .call(yAxis); 

    context.append("path") 
     .datum(data) 
     .attr("class", "area") 
     .attr("d", area2); 

    context.append("g") 
     .attr("class", "axis axis--x") 
     .attr("transform", "translate(0," + height2 + ")") 
     .call(xAxis2); 

    context.append("g") 
     .attr("class", "brush") 
     .call(brush) 
     .call(brush.move, x.range()); 

    svg.append("rect") 
     .attr("class", "zoom") 
     .attr("width", width) 
     .attr("height", height) 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
     .call(zoom); 
}); 

Ce fichier csv ressemble à ceci:

date,sales 
6/1/2017,1394.46 
6/2/2017,1366.42 

console.log(data); retourne le tableau correctement, de sorte que le service WCF est pas le problème .

Toute aide est appréciée.

Merci.

Answer 1

Dans le example, une fonction de conversion de ligne est passé à d3.csv pour analyser les dates. Étant donné que d3.json ne prend pas de fonction de conversion de ligne, vous devez analyser les dates vous-même après le chargement des données:

d3.json("mydata.json", function(error, data) { 
    if (error) throw error; 

    data.forEach(function(d) { 
    d.date = parseDate(d.date); 
    }); 

    ... 
}