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]太短。