javascript - D3.js just drawing a vertical line not actually graphing -

i've been searching thorugh bunch of posts , tutorials trying figure out d3, , think got of fingured out, not drawing line, , don't know why. it's simple d3.line() graph. data had transformed format suitible .line(), , was. confirmed in console that data in format

[{time: 1881, temp: -10} , {time: 1882, temp: -9 } ...] 

if me out i'd appreciate it. tutorials out ther efor d3 v4?

    var width = 500;     var height = 500;     var margin = 25;     var axislength = width - 2 * margin;       var svg = d3.select("body")       .append("svg")         .attr("width", width)         .attr("height", height)       .style("border", "1px solid");         // 5. x scale use index of our data      var xscale = d3.scaletime()         .domain(d3.extent([new date(1881,0,1),new date(2015,0,1)]))         .range([0, width]); // output      // 6. y scale use randomly generate number      var yscale = d3.scalelinear()         .domain(d3.extent(temparrmap["glob"], function(d) {return d;}))          .range([height, 0]); // output       var xaxis = d3.axisbottom(xscale);     var yaxis = d3.axisleft(yscale);      svg.append("g")           .classed("x-axis", true)           .attr("transform", function() {             return "translate(" + margin + "," + (height - margin) + ")";           })         .call(xaxis);         var yrscol = getcol(tempdata,0)     var globcol = getcol(tempdata,1);       var linedata = { x:yrscol, y:globcol};      function fn(data){         var out = data.y.map(function (_, idx) {            return { time: data.x[idx], temp: data.y[idx] };      });        return out;     }       svg.append("g")          .classed("y-axis", true)           .attr("transform", function() {        return "translate(" + margin + "," + margin + ")";       })      .call(yaxis);      var inlinedata = fn(linedata); 

inlinedata in form suitable d3.line() array of objects in form. have confirm data's validity thorough console.

[{time: 1881, temp: -10} , {time: 1882, temp: -9 } ...]

    var line = d3.line()           .x(function(d) { return xscale(d.time); })           .y(function(d) { return yscale(d.temp); });      svg.append("path")       .attr("d", line(inlinedata))       .attr("fill", "none")       .attr("stroke", "red")       .attr("transform", function() {         return "translate(" + margin + "," + margin + ")";       }); 

in snippet, appears missing d3 lifecycle methods, in particular, enter().

http://synthesis.sbecker.net/articles/2012/07/09/learning-d3-part-2

but lets begin with, have blank page, no paragraphs. how new paragraphs on page, representing data? enter .enter(). when call enter() on existing selection, switch sub-selection representing data yet mapped element, because there not yet enough of them on page represent of current dataset. in other words, if there more datums in our dataset elements on page, “enter” sub-selection represents yet-to-be-added elements.

from man himself, bostock has easy follow walk through on bar charts. may clear confusing in implementation missing.

https://bost.ocks.org/mike/bar/

there's pesky enter() again.

since know selection empty, returned update , exit selections empty, , need handle enter selection represents new data there no existing element. instantiate these missing elements appending enter selection.

var barenter = barupdate.enter().append("div");