title: d3js - the path is not drawing full values while using `defined`
body: <p>I am getting data from back-end like this: (the data has <code>0</code> values. so I am preventing those values from draw lines.)</p>
  
  <pre><code>[{"ActualPercentage":5.5,"PlanPercentage":10,"Week":"\/Date(1438376400000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":10.5,"PlanPercentage":15,"Week":"\/Date(1441054800000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":15,"PlanPercentage":20,"Week":"\/Date(1443646800000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":24.129,"PlanPercentage":30,"Week":"\/Date(1446325200000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":27.3,"PlanPercentage":31,"Week":"\/Date(1448917200000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":30.5,"PlanPercentage":33.014,"Week":"\/Date(1451595600000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":33,"PlanPercentage":36.532,"Week":"\/Date(1454274000000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":0,"PlanPercentage":41.246,"Week":"\/Date(1456779600000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":0,"PlanPercentage":44.781,"Week":"\/Date(1459458000000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":0,"PlanPercentage":48.316,"Week":"\/Date(1462050000000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":0,"PlanPercentage":53.03,"Week":"\/Date(1464728400000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":0,"PlanPercentage":57.158,"Week":"\/Date(1467320400000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":0,"PlanPercentage":60.148,"Week":"\/Date(1469998800000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":0,"PlanPercentage":64.868,"Week":"\/Date(1472677200000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":0,"PlanPercentage":69.528,"Week":"\/Date(1475269200000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":0,"PlanPercentage":73.653,"Week":"\/Date(1477947600000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":0,"PlanPercentage":78.956,"Week":"\/Date(1480539600000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":0,"PlanPercentage":84.053,"Week":"\/Date(1483218000000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":0,"PlanPercentage":88.392,"Week":"\/Date(1485896400000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":0,"PlanPercentage":93.119,"Week":"\/Date(1488315600000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":0,"PlanPercentage":97.605,"Week":"\/Date(1490994000000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":0,"PlanPercentage":98,"Week":"\/Date(1493586000000+0300)\/","WeeklyActual":0,"WeeklyPlan":0},
  {"ActualPercentage":0,"PlanPercentage":100,"Week":"\/Date(1496264400000+0300)\/","WeeklyActual":0,"WeeklyPlan":0}]
  </code></pre>
  
  <p>to prevent the drawing unwanted values i am using <code>defined</code> like this:</p>
  
  <pre><code>var line = d3.svg.line()
                  // .interpolate("basis")
                  .defined(function(d) { return d.temperature })
                  .x(function(d) { return x(d.date); })
                  .y(function(d) { return y(d.temperature); }); 
  </code></pre>
  
  <p>But i am not getting the path properly drawn. see here the picture:</p>
  
  <p><a href="https://i.stack.imgur.com/e5Q9x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e5Q9x.png" alt="enter image description here"></a></p>
  
  <p>Actually the green line has to draw up to the top. and the red line is correct here. what is wrong with my approach?</p>
  
  <p>what is the correct way to draw the lines then?</p>
  
  <p><strong>Update</strong>
  if  I comment this line the graph works fine:</p>
  
  <pre><code> // path
                   //      .attr("stroke-dasharray", totalLength + " " + totalLength)
                   //      .attr("stroke-dashoffset", totalLength)
                   //      .transition()
                   //      .duration(2000)
                   //      .ease("linear")
                   //      .attr("stroke-dashoffset", 0);
  </code></pre>