Draw the line use the same y values, plots line at the bottom

Question

I have the same question with it

When use the same value in yAxis ，the plots line at the bottom

This is my code:

var data = [
  {
    creat_time: "2013-03-19 10:28:30",
    roundTripTime: "32"
  },
  {
    creat_time: "2013-03-19 09:07:12",
    roundTripTime: "45"
  },
  {
    creat_time: "2013-03-19 08:57:09",
    roundTripTime: "26"
  },
  {
    creat_time: "2013-03-19 08:47:10",
    roundTripTime: "90"
  },
  {
    creat_time: "2013-03-19 08:37:12",
    roundTripTime: "80"
  },
  {
    creat_time: "2013-03-19 08:27:08",
    roundTripTime: "36"
  }
];
var data1 = [
  {
    creat_time: "2013-03-19 10:28:30",
    roundTripTime: "100"
  },
  {
    creat_time: "2013-03-19 09:07:12",
    roundTripTime: "100"
  },
  {
    creat_time: "2013-03-19 08:57:09",
    roundTripTime: "100"
  },
  {
    creat_time: "2013-03-19 08:47:10",
    roundTripTime: "100"
  },
  {
    creat_time: "2013-03-19 08:37:12",
    roundTripTime: "100"
  },
  {
    creat_time: "2013-03-19 08:27:08",
    roundTripTime: "100"
  }
];
function draw(data) {
  var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
  };
  var width = 960 - margin.left - margin.right;
  var height = 500 - margin.top - margin.bottom;
  var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
  var x = d3.time.scale().range([0, width]);

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

  var xAxis = d3.svg
    .axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%H:%M"));

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

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

  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 + ")");

  data.forEach(function(d) {
    d.creat_time = parseDate(d.creat_time);
    d.roundTripTime = +d.roundTripTime;
  });

  data = sortByReturnTime(data);

  x.domain(
    d3.extent(data, function(d) {
      return d.creat_time;
    })
  );
  y.domain(
    d3.extent(data, function(d) {
      return d.roundTripTime;
    })
  );

  svg
    .append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  svg
    .append("g")
    .attr("class", "y axis")
    .call(yAxis);

  svg
    .append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);
}
draw(data);

When called

draw(data)

it's right.

the SVG is:

And called

draw(data1) //the y values is the same

in the SVG ,plots line at the bottom ,but if there are not errors, it should be at top.

the SVG is:

Any idea what is going wrong here? what can I do something make the plots line at the top? Any help is appreciated.

Answer 1

The problem is that you're setting the input domain of your ranges using d3.extent. If all the values are the same, everything is going to map to a 0 y coordinate. To start the y scale at 0, replace

y.domain(d3.extent(data, function (d) {
  return d.roundTripTime;
}));

with

y.domain([0, d3.max(data, function (d) {
  return d.roundTripTime;
})]);