javascript - 使用相同的 y 值绘制线条，将线条绘制在底部

我有同样的问题

当在 yAxis 中使用相同的值时，绘图会在底部显示

这是我的代码：

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

被叫时

draw(data)

这是对的。

SVG是：

并称

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

在 SVG 中，图线绘制在底部，但如果没有错误，它应该在顶部。

SVG是：

有人知道这里出了什么问题吗？我能做些什么让图表的线在顶部吗？任何帮助都将不胜感激。

答案＃1

问题是你正在使用 d3.extent 设置范围的输入域。如果所有的值都相同，所有东西都会映射到 y 坐标 0。要从 0 开始 y 轴刻度，请替换

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

与

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