d3 line does not draw

Question

I've a problem here. The d3.line() is not showing any lines based on the data provided.

I've tried to print out the values via console.log and it fits the scale. I've checked this link about the scaling issue.

I followed this page but modified it to suit the data given to me. I was wondering if the modifications made broke the code.

Thank you!

Here is my code:

var svg = d3.select("#line-graph"),
margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleLinear().rangeRound([0, width]);
var y = d3.scaleLinear().rangeRound([height, 0]);

var line = d3.line()
   .x(function(d, i) { console.log(i); return i; })
   .y(function(d) { console.log(d); return d; });

d3.json("Data2.json", function(data) {
    x.domain([0, data.length]);
    y.domain(d3.extent(data, function(d1) { return d1.week; }));

    var arrWeek = function(data1) {
    var arr = [];
    for (var i = 0; i < data1.length; i++)
        arr.push(data1[i].week);
    return arr;
    }

    g.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .select(".domain");

    g.append("g")
        .call(d3.axisLeft(y))
        .append("text")
        .attr("fill", "#000")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .text("No. of commits");   

    g.append("path")
        .datum(arrWeek(data))
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 1.5)
        .attr("d", line); 
    });

EDIT: The graph just displays the values scale without any line drawn for the data.

EDIT 2: My apologies. I'm using d3.v4.min.js. As for Data2.json, here are 2 elements as it is quite long:

[
 {
"days": [
  0,
  0,
  0,
  0,
  0,
  1,
  0
],
"total": 1,
"week": 1457827200
},
{
"days": [
  0,
  0,
  0,
  1,
  0,
  3,
  1
],
"total": 5,
"week": 1458432000
}
]

EDIT 3: I'm drawing only the "week" variable, hence the scale would be [0, Data2.length] for x-axis. Hope it clears some doubt.

Answer 1

You have to use your scales in the line generator:

var line = d3.line()
    .x(function(d, i) {
        return x(i);
    //scale ---^
    })
    .y(function(d) {
        return y(d);
    //scale ---^
    });

It may not be your case, but this error normally occurs because people mistake the x and y in the line generator for the x and y in the scales names. That's why it's always a good practice to give meaningful names for your variables and objects: xScale, yScale, xAxis, yAxis etc...

Besides that, when you say...

I've tried to print out the values via console.log and it fits the scale

... this is not accurate. Those are simply the data values, not related to the SVG coordinates system (unless you use your scales).

Here is your working code:

var svg = d3.select("svg"),
margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var data = [
 {
"days": [
  0,
  0,
  0,
  0,
  0,
  1,
  0
],
"total": 1,
"week": 1457827200
},
{
"days": [
  0,
  0,
  0,
  1,
  0,
  3,
  1
],
"total": 5,
"week": 1458432000
}
];

var x = d3.scaleLinear().rangeRound([0, width]);
var y = d3.scaleLinear().rangeRound([height, 0]);

var line = d3.line()
   .x(function(d, i) {  return x(i); })
   .y(function(d) { return y(d); });


    x.domain([0, data.length]);
    y.domain(d3.extent(data, function(d1) { return d1.week; }));

    var arrWeek = function(data1) {
    var arr = [];
    for (var i = 0; i < data1.length; i++)
        arr.push(data1[i].week);
    return arr;
    }

    g.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .select(".domain");

    g.append("g")
        .call(d3.axisLeft(y))
        .append("text")
        .attr("fill", "#000")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .text("No. of commits");   

    g.append("path")
        .datum(arrWeek(data))
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 1.5)
        .attr("d", line); 

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="600" height="500"></svg>