D3不要な余分な行を折れ線グラフに追加する

Question

複数の折れ線グラフをグラフ化するときにthis exampleをフォローしています。何らかの理由でデータを整理すると何度もループしてしまいます。 = 0である。 （私がコンソールに集団変数を記録すると、配列にオブジェクトが多すぎます）。

データは、このGoogleのシートに住んでいる：これを固定するhttps://docs.google.com/spreadsheets/d/1o9HowBfwUmzzVPBB-LGCKxIp-tWVljKsQP7UO59Y-G8/edit?usp=drive_web

任意の提案を？何らかの理由で

<script type = "text/javascript" src="http://d3js.org/d3.v3.min.js"></script> 
    <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> 
     <style> 

      .axis { 
       font: .8em sans-serif; 
      } 
      .axis path, 
      .axis line { 
       fill: none; 
       stroke: #000; 
       shape-rendering: crispEdges; 
      } 

      .x.axis path { 
       display: none; 
      } 

      .redrawable:hover{ 
       opacity: .5; 
      } 
      .line { 
       fill: none; 
       stroke: #000000; 
       stroke-width: 2.5px; 
      } 
      #tooltip { 
       position: absolute; 
       width: auto; 
       height: auto; 
       padding: 10px; 
       background-color: white; 
       border-radius: 10px; 
       box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
       pointer-events: none; 
       text-align: center; 
       color: #000000; 
      } 
      #tooltip.hidden { 
       display: none; 
      } 
      #tooltip p { 
       margin: 0; 
       font-size: 1em; 
       line-height: 1em; 
      } 
      .button { 
       background-color: #B5BFBE; 
       width: 30%; 
       height: auto; 
       border-radius: 8px; 
       text-align: center; 
       display: inline-block; 
       padding: 1%; 
       margin: .5%; 
       color: #ffffff; 

      } 
      .button:hover { 
       opacity: .5; 
       cursor: pointer; 
      } 
      .buttonHolder { 
       text-align: center; 
       max-width: 700px; 
      } 
     </style> 

     <div id="graph"> 
      <div id="tooltip" class="hidden"> 
       <p id="value">value</p> 
      </div> 

    <script type="text/javascript"> 
      var w = 700 
      h = 500 

     var margin = {top: 20, right: 140, bottom: 130, left: 100}, 
      width = w - margin.left - margin.right, 
      height = h - margin.top - margin.bottom; 

     var parseDate = d3.time.format("%Y").parse; 

     var x = d3.time.scale() 
      .range([0, width]); 
     var y = d3.scale.linear() 
      .range([height, 0]); 

     var color = d3.scale.ordinal() 
      .range([ "#43736C", "#29403C", "#f4b400", '#000']) 
      //"#29403C", "#463573", "#f4b400", "#43736C", "#43736C", "#f4b400"  ]); 

     var xAxis = d3.svg.axis() 
      .scale(x) 
      .orient("bottom"); 
     var yAxis = d3.svg.axis() 
      .scale(y) 
      .orient("left"); 

     var line = d3.svg.line() 
      //.interpolate("basis") 
      .x(function(d) {return x(d.year); }) 
      .y(function(d) {return y(d.arrests); }); 

     var svg = d3.select("#graph").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 + ")"); 

     d3.csv("https://spreadsheets.google.com/tq?key=1o9HowBfwUmzzVPBB-LGCKxIp-tWVljKsQP7UO59Y-G8&tqx=out:csv", function(error, data) { 
      if (error) throw error; 

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

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

      var populations = color.domain().map(function(name) { 
       return { 
        name: name, 
        values: data.map(function(d) { 
         return {year: d.year, arrests: +d[name]}; 
         }) 
        }; 
       }); 
      console.log(populations); 

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

      y.domain([0, 160000]); 

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

      svg.append("g") 
       .attr("class", "y axis") 
       .call(yAxis) 
       .append("text") 
        .attr("transform", "rotate(-90)") 
        .attr("y", 0) 
        .attr("dy", "-6em") 
        .style("text-anchor", "end") 
        .text("Number of arrests"); 

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

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

      pop.append("text") 
       .datum(function(d) {return {name: d.name, value: d.values[d.values.length - 1]}; }) 
       .attr("transform", function(d) {return "translate(" + x(d.value.year) + "," + y(d.value.arrests) + ")"; }) 
       .attr("x", 3) 
       .attr("dy", ".35em") 
       .text(function(d) {return d.name;}); 
      }); 
    </script> 

Answer 1

、d3.csvは、Googleスプレッドシートをロードする際、空のフィールドを追加する空のオブジェクトのペアを作成している：

{"": ""} 

私が行ったようにあなたは、dataからかpopulationsからそれを削除することができます。ここで

var populations = populations.filter(function(d){ 
    return d.name != ""; 
}); 

はフィドルです：https://jsfiddle.net/mw9hhbjx/