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（数据）时 draw(data) 没错

SVG是：

并调用draw（data1）//y值相同 draw(data1) //the y values is the same 在SVG中，打印行位于底部，但如果没有错误，则应位于顶部

SVG是：

知道这里出了什么问题吗？我能做些什么使绘图线在顶部？

---

非常感谢您的帮助。

问题是您正在使用

d3.extent

设置范围的输入域。如果所有值都相同，则所有内容都将映射到0 y坐标。要将y比例从0开始，请替换

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

与

---

您是否尝试过将数字作为实际数字放入JSON中（即删除其周围的引号）？是的。通过表达式“d.roundTripTime=+d.roundTripTime；它被转换为数字。

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