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

Question

我对 it 有同样的疑问

当在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 是:

知道这里出了什么问题吗？我该怎么做才能使绘图位于顶部？感谢您的帮助。

Answer 1

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

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

与

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