score:0

the problem here is that you are using an ordinal scale for the x axis:

var x = d3.scale.ordinal()
    .domain(d3.range(data.length))

which has this domain:

[0, 1, 2, 3, 4, 5, 6, 7]

however, you're passing the datum to the line generator:

var line = d3.svg.line()
    .x(function(d) { return x(d);})
    //datum here -------------^

instead of that, pass the index of the datum:

var line = d3.svg.line()
    .x(function(d, i) { return x(i);})
    //index here ----------------^

here is your updated code:

var data = [-0.1, -0.5, -0.32, 0.2, 1, 0.5, -0.3, -1.0];

var margin = {
    top: 30,
    right: 10,
    bottom: 10,
    left: 30
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var y0 = math.max(math.abs(d3.min(data)), math.abs(d3.max(data)));

var y = d3.scale.linear()
  .domain([-y0, y0])
  .range([height, 0])
  .nice();

var x = d3.scale.ordinal()
  .domain(d3.range(data.length))
  .rangeroundbands([0, width], .2);

var yaxis = d3.svg.axis()
  .scale(y)
  .orient("left");

var svg = d3.select("body").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 + ")");

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


var datasum = d3.sum(data, function(d) {
  return d;
});


svg.append("g")
  .attr("class", "x axis")
  .call(yaxis);

svg.append("g")
  .attr("class", "y axis")
  .append("line")
  .attr("y1", y(0))
  .attr("y2", y(0))
  .attr("x1", 0)
  .attr("x2", width);

svg.append("path")
  .data([data])
  .attr("class", "line")
  .attr("d", line);
.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispedges;
}

.line{
    fill: none;
    stroke: blue;
    stroke-width: 2px;
  }

  .tick text{
    font-size: 12px;
  }

  .tick line{
    opacity: 0.2;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

ps: you don't need that awkward line in the middle of the chart. you can create a proper axis:

var data = [-0.1, -0.5, -0.32, 0.2, 1, 0.5, -0.3, -1.0];

var margin = {
    top: 30,
    right: 10,
    bottom: 10,
    left: 30
  },
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var y0 = math.max(math.abs(d3.min(data)), math.abs(d3.max(data)));

var y = d3.scale.linear()
  .domain([-y0, y0])
  .range([height, 0])
  .nice();

var x = d3.scale.ordinal()
  .domain(d3.range(data.length))
  .rangeroundbands([0, width], .2);

var yaxis = d3.svg.axis()
  .scale(y)
  .orient("left");

var xaxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

var svg = d3.select("body").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 + ")");

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

var datasum = d3.sum(data, function(d) {
  return d;
});

svg.append("g")
  .attr("class", "x axis")
  .call(yaxis);

svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(0," + y(0) + ")")
  .call(xaxis)

svg.append("path")
  .data([data])
  .attr("class", "line")
  .attr("d", line);
.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispedges;
}

.line {
  fill: none;
  stroke: blue;
  stroke-width: 2px;
}

.tick text {
  font-size: 12px;
}

.tick line {
  opacity: 0.2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


Related Query