D3 불필요한 여분의 선을 내 선 차트에 추가

Question

여러 선 그래프를 그래프로 표시 할 때 this example을 따르고 있습니다. 어떤 이유로 데이터를 정리할 때 너무 많은 시간이 지나면 반복적으로 선 그래프를 그릴 수 있습니다. = 0이다. (콘솔에 모집단 변수를 기록 할 때 배열에 객체가 너무 많습니다.) 이 구글 시트에서

데이터 생활이 고정 용 https://docs.google.com/spreadsheets/d/1o9HowBfwUmzzVPBB-LGCKxIp-tWVljKsQP7UO59Y-G8/edit?usp=drive_web

어떤 제안? 내가 그랬던 것처럼,

{"": ""} 

당신은 data 또는 populations에서 제거 할 수 있습니다 : 구글 스프레드 시트를로드 할 때 d3.csv 빈 개체 쌍을 생성, 빈 필드를 추가하고 어떤 이유를 들어

<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

: https://jsfiddle.net/mw9hhbjx/

: 여기

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

는 바이올린입니다