D3折線圖轉換為bindPopup

Question

我是D3.js的完整入門者，我試圖將一個簡單的折線圖添加到leafletJS彈出窗口中。

我試圖根據實際情況將數組中的值相對於它們的索引進行繪制。

這是單擊功能的代碼：

point.on("click", function() {

  var div = $('<div style="width: 800px; height: 300px;"><svg/></div>')[0];
  this.bindPopup(div);
  this.openPopup();

  //data:
  var data = [3, 6, 2, 7, 5, 2, 0, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7];

  // set scales:
  var x = d3.scale.linear().domain([0,data.length]).range([0, 300]);
  var y = d3.scale.linear().domain([0,10]).range([0, 300]);

  // create axes:
  var xAxis = d3.svg.axis().scale(x).orient("bottom");
  var yAxis = d3.svg.axis().scale(y).orient("left");

  //construct line:
  var line = d3.svg.line()
    .x(function(d, i) {
      return x(i);
    })
    .y(function(d) {
      return y(d);
    });

  var svg = d3.select(div).append("svg")
    .attr("width", 600)
    .attr("height", 300)
    .append("g")
    .attr("transform", "translate(0,0)");

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

  svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(20,-150)")
    .call(yAxis);

  svg.append("path").attr("d", line(data));

})

這是我在彈出窗口中得到的結果：

從標尺到沒有線條，再到y軸在x軸以下，我一無所知。

在這里的任何方向將不勝感激。

謝謝。

Answer 1

您在xAxis中使用了trasnalate而不是translate ，這可以解釋x欄的移動。

編輯： 我以前關於反轉y比例的答案是不正確的。 引起問題的原因可能是以下幾種：

關於規模，您忘了提及領域了：

 var x = d3.scale.linear().domain([0, data.length]).range([0, 300]);
 var y = d3.scale.linear().domain([0, 10]).range([300, 0]);

引用文檔：

d3.scale.linear（）：使用默認域[0,1]和默認范圍[0,1]構造一個新的線性比例。

對於x您可以放心地將data.length保留為最大值，對於y您可能需要將值更改為10以適合您的需要（您也可以在數據數組中查找最大值）。 但是無論如何[0,1]太短了。