Diagramme linéaire incomplet avec points et lignes manquants

Question

var maindata=[
{"date":"21-APR-16 04:19 AM","Delhi":30,"Mumbai":28},
{"date":"21-APR-16 05:19 AM","Delhi":32,"Mumbai":30},
{"date":"21-APR-16 06:19 AM","Delhi":34,"Mumbai":34},
{"date":"21-APR-16 10:19 AM","Kolkata":34},
{"date":"21-APR-16 11:19 AM","Delhi":48,"Chennai":40,"Kolkata":36}
];

            var that = this;
            var deepClonedCopy = jQuery.extend(true, {}, maindata);
            var data;
            data = $.map(deepClonedCopy, function(el) { return el });
            //  var passedheight = this.getHeight();
            //var containerWidth = jQuery.sap.byId(this.oParent.sId).width() || 800; // gets super parent width
            var margin = {top: 15, right: 30, bottom: 20, left: 30},
            width = 960- margin.left - margin.right,
             height = 500 - margin.top - margin.bottom;
            if(data.length >= 1){
                //alert(JSON.stringify(data));
            var parseDate = d3.time.format("%d-%b-%y %H:%M %p").parse;
            var maxDate = d3.time.hour.offset(parseDate(d3.max(data, function(d) { return d.date; })),+1);
            var minDate = d3.time.hour.offset(parseDate(d3.min(data, function(d) { return d.date; })),-1);

            var div = d3.select("#toolTip");

            var x = d3.time.scale()
            .domain([minDate, maxDate])
            .range([0, width]);

            var y = d3.scale.linear()
                .range([Math.ceil(height), 0]);

            var color = d3.scale.category10();

            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom").ticks(4);

            var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left").ticks(4).tickSize(-width, 0, 0);

            var line = d3.svg.line()
                .x(function(d) { return x(d.date); })
                .y(function(d) { return y(d.tonneValue); });

            var svg = d3.select("body").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
              .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

              color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date" && key !== "maxLength"; }));

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

              var wsfs = color.domain().map(function(name) {
                return {
                  name: name,
                  values: data.map(function(d) {
                    return {date: d.date, tonneValue: +d[name]};
                  })
                };
              });

              //x.domain(d3.extent(data, function(d) { return d.date; }));

              y.domain([
                //d3.min(wsfs, function(c) { return d3.min(c.values, function(v) { return v.tonneValue; }); }),
                0,
                Math.ceil(d3.max(wsfs, function(c) { return d3.max(c.values, function(v) { return v.tonneValue; }); }))
              ]);

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

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

              var wsf = svg.selectAll(".wsf")
                  .data(wsfs)
                  .enter().append("g")
                  .attr("class", "wsf");

              wsf.append("path")
                  .attr("class", "line")
                  .attr("d", function(d) { return line(d.values); })
                  .style("stroke", function(d) { return color(d.name); });
              wsf.selectAll("dot")                                  
                 .data(function(d) { return d.values;})                                         
                 .enter().append("circle")
                 .attr("class", "dot")
                 .attr("r", 3)  
                 .attr("cx", function(d) { return x(d.date); })      
                 .attr("cy", function(d) { return y(d.tonneValue); })
                 .attr("stroke", function (d) {
                        return color(this.parentNode.__data__.name) })
                 .attr("fill", function (d) {
                        return color(this.parentNode.__data__.name) })
                 //.attr("fill-opacity", .5)
                 //.attr("stroke-width", 2)
                 .on("mouseover", function (d) {
                     formatDate = d3.time.format("%d-%m-%Y %H:%M %p");
                        div.transition().duration(100).style("opacity", .9);
                        div.html(/*this.parentNode.__data__.name + "<br/>" +*/ d.tonneValue /*+ "<br/>" + "<br/>"*/ +" Tonne handled at "+ formatDate(d.date))
                        .style("left", (d3.event.pageX) + "px").style("top", (d3.event.pageY - 28) + "px").attr('r', 8);
                        d3.select(this).attr('r', 8)
                    }).on("mouseout", function (d) {
                        div.transition().duration(600).style("opacity", 0)
                        d3.select(this).attr('r', 3);
                    });
              var legendNames = d3.keys(data[0]).filter(function(key) { return key !== "date" });

              data.forEach(function(d) {
                d.ages = legendNames.map(function(name) { return {name: name, value: +d[name]}; });
              });
             var legend = svg.selectAll(".legend")
                  .data(legendNames.slice())
                .enter().append("g")
                  .attr("class", "legend")
                  .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

              legend.append("rect")
                  .attr("x", width - 18)
                  .attr("width", 18)
                  .attr("height", 4)
                  .style("fill", function(d) {return color(d); });

              legend.append("text")
                  .attr("x", width - 24)
                  .attr("y", 6)
                  .attr("dy", ".35em")
                  .style("text-anchor", "end")
                  .text(function(d) {  return d; });
            }

Le code ci-dessus donne 2 lignes, jusqu'aux 3 premiers éléments json jusqu'à ce que le format des données soit similaire.
mais à partir du 4ème élément, il n'y a pas de Delhi / Mumbai et il n'y a que Kolkata mais je ne trouve pas de ligne pour Kolkata 34, Kolkata 36 ni Delhi Le point 48, où Delhi La ligne de Chennai devrait s'étendre de 34 à 48 et Chennai un simple point est attendu car il n'y a qu'un seul point de Chennai, c'est-à-dire 40.
Quelqu'un peut-il me dire où je fais fausse route ? Voici un violon .

Answer 1

Voici la mise à jour violon

certaines clés (c'est-à-dire Kolkata ) ne sont pas inclus dans les données contraignantes

Code original :

          color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date" && key !== "maxLength"; }));

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

          var wsfs = color.domain().map(function(name) {
            return {
              name: name,
              values: data.map(function(d) {
                return {date: d.date, tonneValue: +d[name]};
              })
            };
          });

Pour(vous avez besoin de changement ['Delhi', 'Mumbai', 'Kolkata', 'Chennai'] pour coder de manière plus formelle) :

          var wsfs = ['Delhi', 'Mumbai', 'Kolkata', 'Chennai'].map(function(name) {
            return {
              name: name,
              values: data.map(function(d) {
                return {date: d.date, tonneValue: +d[name]};
              }).filter(function(d) {
            return !isNaN(d.tonneValue)
        })
            };
          });

Données du filtre
Code original :

          var wsfs = color.domain().map(function(name) {
            return {
              name: name,
              values: data.map(function(d) {
                return {date: d.date, tonneValue: +d[name]};
              })
            };
          });

A :

          var wsfs = ['Delhi', 'Mumbai', 'Kolkata', 'Chennai'].map(function(name) {
            return {
              name: name,
              values: data.map(function(d) {
                return {date: d.date, tonneValue: +d[name]};
              }).filter(function(d) {
                return !isNaN(d.tonneValue)
            })};
          });

Answer 2

Le principal problème du code (lignes et points manquants et légende incomplète) est que vos données ont besoin d'être structurées.

Votre jeu de données contient parfois des villes qui peuvent être présentes ou non.

La première tâche consistera donc à créer un ensemble de données adéquat.

A partir de là :

var maindata = [{
  "date": "21-APR-16 04:19 AM",
  "Delhi": 30,
  "Mumbai": 28
}, {
  "date": "21-APR-16 05:19 AM",
  "Delhi": 32,
  "Mumbai": 30
}, {
  "date": "21-APR-16 06:19 AM",
  "Delhi": 34,
  "Mumbai": 34
}, {
  "date": "21-APR-16 10:19 AM",
  "Kolkata": 34
}, {
  "date": "21-APR-16 11:19 AM",
  "Delhi": 48,
  "Chennai": 40,
  "Kolkata": 36
}];

A esto:

[
   {
      "name":"Delhi",
      "values":[
         {
            "date":"2016-04-20T22:49:00.000Z",
            "value":30
         },
         {
            "date":"2016-04-20T23:49:00.000Z",
            "value":32
         },
         {
            "date":"2016-04-21T00:49:00.000Z",
            "value":34
         },
         {
            "date":"2016-04-21T05:49:00.000Z",
            "value":48
         }
      ]
   },
   {
      "name":"Mumbai",
      "values":[
         {
            "date":"2016-04-20T22:49:00.000Z",
            "value":28
         },
         {
            "date":"2016-04-20T23:49:00.000Z",
            "value":30
         },
         {
            "date":"2016-04-21T00:49:00.000Z",
            "value":34
         }
      ]
   },
   {
      "name":"Kolkata",
      "values":[
         {
            "date":"2016-04-21T04:49:00.000Z",
            "value":34
         },
         {
            "date":"2016-04-21T05:49:00.000Z",
            "value":36
         }
      ]
   },
   {
      "name":"Chennai",
      "values":[
         {
            "date":"2016-04-21T05:49:00.000Z",
            "value":40
         }
      ]
   }
]

Toutes les villes disposent donc désormais de leurs données respectives. Le nombre de villes étant x, le nombre de lignes sera x.

C'est ce que fait l'ensemble de données :

var cities = []
var parseDate = d3.time.format("%d-%b-%y %H:%M %p").parse;
maindata.forEach(function(d) {
  cities.push(d3.keys(d).filter(function(key) {
      return key !== "date" && key !== "maxLength";
    }));
  });
cities = d3.set(d3.merge(cities)).values();//get all  cites and make it unique
console.log(cities)
var myData = [];
var allValues = [];
var allDates =[];
//generate cities and its values as shown in my dataset above.
cities.forEach(function(city){
    var cityData = {};
    cityData.name = city;
    cityData.values = [];
    maindata.forEach(function(md){
        if (md[city]){
          allValues.push(md[city])
            allDates.push(parseDate(md.date))
            cityData.values.push({date: parseDate(md.date), value: md[city]})
        }
    })
    myData.push(cityData)
});

Faites ensuite des lignes comme celles-ci :

  var wsf = svg.selectAll(".wsf")
    .data(myData)
    .enter().append("g")
    .attr("class", "wsf");

  wsf.append("path")
    .attr("class", "line")
    .attr("d", function(d) {
      return line(d.values);
    })
    .style("stroke", function(d) {
      return color(d.name);
    });

Et des légendes comme celle-ci :

  var legend = svg.selectAll(".legend")
    .data(cities)
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) {
      return "translate(0," + i * 20 + ")";
    });

  legend.append("rect")
    .attr("x", width - 18)
    .attr("width", 18)
    .attr("height", 4)
    .style("fill", function(d) {
      return color(d);
    });

  legend.append("text")
    .attr("x", width - 24)
    .attr("y", 6)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function(d) {
      return d;
    });
}

code de travail aquí