不完整折線圖，缺失點和缺失線

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; }); 
      } 

上面的代碼給出2行，直到前3個json元素，直到數據格式相似。
但是從第四元件沒有Delhi/Mumbai和有剛Kolkata，但是我沒有找到一個線Kolkata 34，Kolkata 36既不Delhi的48點，其中Delhi的行應延伸34至48和欽奈一個簡單的點預計，因爲只有一個點欽奈即40.
任何人都可以告訴我在哪裏做錯了。這是一個fiddle。

Answer 1

在代碼中存在的主要問題（缺少的線和點和不完整的傳說）是您的數據需要一些結構。

某些時候您的數據集包含可能存在或不存在的城市。

所以第一項任務將是使一個合適的數據組

從這：

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 
}]; 

要這樣：

[ 
    { 
     "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 
     } 
     ] 
    } 
] 

所以現在所有的城市都有其各自的數據。 城市數量x所以行數爲x。

爲了使數據集這樣做：

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) 
}); 

下使線路是這樣的：

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); 
    }); 

和傳說是這樣的：

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; 
    }); 
} 

工作代碼here

Answer 2

這裏是更新fiddle

某些鍵（即Kolkata）不包括在數據綁定

原始代碼：

  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]}; 
       }) 
      }; 
      }); 

要（你需要更改['Delhi', 'Mumbai', 'Kolkata', 'Chennai']代碼更正式）：

  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) 
     }) 
      }; 
      }); 

篩選數據
原始代碼：

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

要：

  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) 
      })}; 
      });