6

私はそれと同じ質問があります

で同じ値を使用すると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);

呼び出されたとき

描画(データ)
それはそうです。

SVG は次のとおりです。

ここに画像の説明を入力

そして呼ばれた

draw(data1) //y の値は同じ
SVGでは、行を一番下にプロットしますが、エラーがない場合は一番上にあるはずです。

SVG は次のとおりです。

ここに画像の説明を入力

ここで何がうまくいかないのですか?上部にプロット線を作成するにはどうすればよいですか? どんな助けでも大歓迎です。

4

1 に答える 1