d3.js seltsame Graphenanzeige

Question

Ich versuche, ein Programm auszuführen, das ein Diagramm basierend auf einer JSON-Datei anzeigt. Aber die Grafik ist komisch, ich weiß nicht warum. Irgendwelche Ideen, wie man es repariert? mein Code dank

hier:

var svg = d3.select("svg"), 
       margin = { 
        top: 20, 
        right: 20, 
        bottom: 30, 
        left: 60 
       }, 
       width = +svg.attr("width") - margin.left - margin.right, 
       height = +svg.attr("height") - margin.top - margin.bottom, 
       g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

      var parseDate = d3.timeParse("%Y%m%d"), 
       formatDate = d3.timeFormat("%Y"); 

      var x = d3.scaleTime() 
       .domain([new Date(2016, 0, 1), new Date(2018, 0, 0)]) 
       .range([0, width]); 

      var y = d3.scaleLinear() 
       .range([height, 0]); 

      var xAxis = d3.axisBottom(x); 

      var yAxis = d3.axisLeft(y); 

      var area = d3.area() 
       .curve(d3.curveStepAfter) 
       .x(function(d) { 
        return x(d.Date_Id); 
       }) 
       .y0(y(0)) 
       .y1(function(d) { 
        return y(d.NbCopie); 
       }); 

      var colors = d3.scaleLinear() 
       .domain([0, width]) 
       .range(['#0080FF', '#FF3333']) 

      var areaPath = g.append("path") 
       .attr("clip-path", "url(#clip)") 
       .attr("fill", function(d, i) { 
        return colors(i); 
       }) 

      var yGroup = g.append("g"); 

      var xGroup = g.append("g") 
       .attr("transform", "translate(0," + height + ")"); 

      var zoom = d3.zoom() 
       .scaleExtent([1/4, 8]) 
       .translateExtent([ 
        [-width, -Infinity], 
        [2 * width, Infinity] 
       ]) 
       .on("zoom", zoomed); 

      var zoomRect = svg.append("rect") 
       .attr("width", width) 
       .attr("height", height) 
       .attr("fill", "none") 
       .attr("pointer-events", "all") 
       .call(zoom); 

      g.append("clipPath") 
       .attr("id", "clip") 
       .append("rect") 
       .attr("width", width) 
       .attr("height", height); 

      // FICHIER JSON /////////////////////////////////////// 
      d3.json("data.json", function(error, data) { 
       data.forEach(function(d) { 
        d.Date_Id = parseDate(d.Date_Id); 
        d.NbCopie = +d.NbCopie; 
       }) 

       var xExtent = d3.extent(data, function(d) { 
        return d.Date_Id; 
       }) 

       zoom.translateExtent([ 
        [x(xExtent[0]), -Infinity], 
        [x(xExtent[1]), Infinity] 
       ]) 
       y.domain([0, d3.max(data, function(d) { 
        return d.NbCopie; 
       })]); 
       yGroup.call(yAxis).select(".domain").remove(); 
       areaPath.datum(data); 
       zoomRect.call(zoom.transform, d3.zoomIdentity); 
      }); 

      function zoomed() { 
       var xz = d3.event.transform.rescaleX(x); 
       xGroup.call(xAxis.scale(xz)); 
       areaPath.attr("d", area.x(function(d) { 
        return xz(d.Date_Id); 
       })); 
      } 

Die JSON-Datei:

[{ 
    "ConsoPhot_Id": "10148", 
    "idLotImport": 390, 
    "Date_Id": 20170201, 
    "Orga_Id": "203938", 
    "NbTache": 153, 
    "NbCopie": 798, 
    "NbCopieBW": 488, 
    "NbCopieCouleur": 310, 
    "MtTotal": 13.69 
}, 
{ 
    "ConsoPhot_Id": "10602", 
    "idLotImport": 391, 
    "Date_Id": 20161201, 
    "Orga_Id": "203938", 
    "NbTache": 153, 
    "NbCopie": 909, 
    "NbCopieBW": 779, 
    "NbCopieCouleur": 130, 
    "MtTotal": 7.93 
}, 
{ 
    "ConsoPhot_Id": "10905", 
    "idLotImport": 392, 
    "Date_Id": 20161101, 
    "Orga_Id": "203938", 
    "NbTache": 115, 
    "NbCopie": 515, 
    "NbCopieBW": 409, 
    "NbCopieCouleur": 106, 
    "MtTotal": 5.6 
}, 
{ 
    "ConsoPhot_Id": "11162", 
    "idLotImport": 393, 
    "Date_Id": 20161001, 
    "Orga_Id": "203938", 
    "NbTache": 233, 
    "NbCopie": 1173, 
    "NbCopieBW": 725, 
    "NbCopieCouleur": 448, 
    "MtTotal": 19.86 
}, 
{ 
    "ConsoPhot_Id": "11745", 
    "idLotImport": 394, 
    "Date_Id": 20170101, 
    "Orga_Id": "203938", 
    "NbTache": 173, 
    "NbCopie": 889, 
    "NbCopieBW": 782, 
    "NbCopieCouleur": 107, 
    "MtTotal": 7.07 
}, 
{ 
    "ConsoPhot_Id": "12144", 
    "idLotImport": 435, 
    "Date_Id": 20170301, 
    "Orga_Id": "203938", 
    "NbTache": 131, 
    "NbCopie": 590, 
    "NbCopieBW": 454, 
    "NbCopieCouleur": 136, 
    "MtTotal": 6.92 
} 
] 

Und hier ist das seltsame Diagramm:

Answer 1

Sie haben chronologisch Ihr Datenfeld zu sortieren:

data.sort(function(a,b){ 
    return d3.ascending(a.Date_Id, b.Date_Id) 
}) 

Hier ist ein funktionierender Plünderer: http://plnkr.co/edit/vBMAPKOmNgoXR9kUCDab?p=preview