d3 line chart using path is not showing anything - d3.js

Question

I am trying to draw a path that means line chart using d3.js. I am using the following code
var data;
d3.csv("myfile.csv",function(datagot){data=datagot;});
var format = d3.time.format("%Y/%m/%d %H:%M:%S");
data.forEach(function (e){
e.dist = +e.dist;
e.speed = +e.speed;
e.lat=+e.lat;
e.lon=+e.lon;
e.dd=format.parse(e.time);
});
var xScale = d3.time.scale().range([margin.left, width - margin.right]).domain([d3.min(dataset,function(d){return d.dd}),d3.max(dataset,function(d){ return d.dd})]),
yScale = d3.scale.linear().range([height - margin.top, margin.bottom]).domain([d3.min(dataset,function(d){return d.dist;}),d3.max(dataset,function(d){return d.dist;})]),
xAxis = d3.svg.axis()
.scale(xScale).ticks(10).tickFormat(d3.time.format("%H:%M")).tickPadding(2),
yAxis = d3.svg.axis()
.scale(yScale).orient("left").tickPadding(5).ticks(5);
var svg = d3.select("body").append("svg")
.attr("width", width-50 )
.attr("height", height -60);
svg.append("svg:g")
.attr("class","axis")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(xAxis);
// x axis label
svg.append("text")
.attr("x", width / 2 )
.attr("y", height - 60)
.style("text-anchor", "middle")
.text("Time");
svg.append("svg:g")
.attr("class","axis")
.attr("transform", "translate(" + (margin.left-10) + ",-90)")
.call(yAxis);
// Y axis label
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 15)
.attr("x",70- (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Distance");
// svg.append("g")
//.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
lineh = d3.svg.line().x(function(d) {
return x(d.dd);
}).y(function(d) {
return y(d.dist);
});
var line = svg.append("g").attr("transform", "translate(" + margin.left + "," + (-margin.top) + ")").selectAll(".hour")
.data(outputf)
.enter().append("path")
//.attr("x", function(d) { return (d.dd.getMinutes())*15 ; })
// .attr("cx", function(d) { return (d.dd.getMinutes())*10 ; })
//.attr("y", function(d) { return (d.dist)*50 ; })
// .attr("cy", function(d) { return height-100-(d.dist)*50 ; })
//.attr("r",3)
/* .attr("rx", 2)
.attr("ry", 2)*/
.attr("d",lineh)
.attr("class", "line");
But its actually not plotting anything. I am giving the jsfiddle for your help to understand. http://jsfiddle.net/1b0gn0r2/. The jsfiddle is not well organized but it contains my code and the csv data I am using is at the bottom. Can anyone help me to find the error?
In my actual code the output is the following

Answer 1

There's a lot that seems to be wrong in your code! Having various things missing (like margin, height, width, other variables, the CSS etc), makes it very painful to answer your question.
To start with, if you're struggling with jsfiddle you may prefer Plunker, which makes it easier to organise your code and data.
I've created a plunk that works with your code here: http://plnkr.co/edit/ZEi7U6qQ8pxq06FdDIW6?p=preview
...but it involved quite a few changes, which I'll try to summarise:
Loading is asynchronous, so this line:
d3.csv("myfile.csv",function(datagot){data=datagot;});
will not do what you expect. The rest of the code will go off and execute (eg drawing axes) without data having been properly set. So you try to draw the line before the data is ready. Fix this by inserting the main code into the data load function.
Defining scales. You seem to define 4 different scales:
xScale = d3.time.scale()
yScale = d3.scale.linear()
x = d3.scale.linear()
y = d3.scale.linear()
That causes problems later in your line drawing function (more to come on that). I've got rid of x and y here
The line drawing function lineh expects the scales to be x and y, but I suggest using the xScale and yScale ones you've defined before.
// line function
lineh = d3.svg.line()
.x(function(d) {
return xScale(d.dd); // <- do not use d(d.dd)
})...
Calling the line function should be done in a completely different way: Your code:
var line = svg.append("g")
.data(outputf)
.enter().append("path")
.attr("d",lineh)
.attr("class", "line");
Not sure what outputf is so I ignored that. lineh (defines how to draw the line) should be called with the data. I changed the call to:
var line = svg.append("g")
.append("path")
.attr("d", lineh(dataset)) // <- Note the change
.attr("class", "line");
Finally I reorganised the code to bring some variable definitions to the top of the file and make it easier to follow.