D3.js只是繪製了一條垂直線，實際上並沒有繪製出圖片

Question

我一直在搜索我的一些帖子和教程，試圖找出d3，我想我得到了大部分的感覺，但這不是繪製線，我不知道爲什麼。這是一個簡單的d3.line()圖。數據必須轉換成適合.line()的格式，並且是。我也在控制檯證實，該數據是在格式

[{time: 1881, temp: -10} , {time: 1882, temp: -9 } ...] 

如果任何人都可以幫助我這個，我會很感激。還有什麼好的教程出來e3 d3 v4？

var width = 500; 
    var height = 500; 
    var margin = 25; 
    var axisLength = width - 2 * margin; 


    var svg = d3.select("body") 
     .append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .style("border", "1px solid"); 



    // 5. X scale will use the index of our data 
    var xScale = d3.scaleTime() 
     .domain(d3.extent([new Date(1881,0,1),new Date(2015,0,1)])) 
     .range([0, width]); // output 

    // 6. Y scale will use the randomly generate number 
    var yScale = d3.scaleLinear() 
     .domain(d3.extent(tempArrMap["Glob"], function(d) {return d;})) 
     .range([height, 0]); // output 

    var xAxis = d3.axisBottom(xScale); 
    var yAxis = d3.axisLeft(yScale); 

    svg.append("g") 
      .classed("x-axis", true) 
      .attr("transform", function() { 
      return "translate(" + margin + "," + (height - margin) + ")"; 
      }) 
     .call(xAxis); 




    var yrsCol = getCol(tempData,0) 
    var globCol = getCol(tempData,1); 


    var LineData = { x:yrsCol, y:globCol}; 

    function fn(data){ 
     var out = data.y.map(function (_, idx) { 
      return { time: data.x[idx], temp: data.y[idx] }; 
    }); 
     return out; 
    } 

    svg.append("g") 
     .classed("y-axis", true) 
      .attr("transform", function() { 
     return "translate(" + margin + "," + margin + ")"; 
     }) 
    .call(yAxis); 

    var inLineData = fn(LineData); 

inLineData現在在適於d3.line()一個形式是形式對象的數組。我已通過控制檯確認數據的有效性。

[{time: 1881, temp: -10} , {time: 1882, temp: -9 } ...]

var line = d3.line() 
      .x(function(d) { return xScale(d.time); }) 
      .y(function(d) { return yScale(d.temp); }); 

    svg.append("path") 
     .attr("d", line(inLineData)) 
     .attr("fill", "none") 
     .attr("stroke", "red") 
     .attr("transform", function() { 
     return "translate(" + margin + "," + margin + ")"; 
     }); 

Answer 1

在你的片段，看來你缺少你D3生命週期方法，尤其是輸入（）。

http://synthesis.sbecker.net/articles/2012/07/09/learning-d3-part-2

但可以說，首先，我們只是有一個空白頁，沒有 段落。我們如何在頁面上獲得新的段落，代表 數據？輸入.enter（）。當我們在現有選擇上調用enter（）時，我們切換到代表映射到元素的尚未被 的數據的子選擇，因爲在 頁面上還沒有足夠的數據來表示所有的當前數據集。換句話說，如果 在我們的數據集中的基準數多於頁面上的元素，則「輸入」 子選擇表示尚未添加的元素。

從這個人自己，博斯托克有一個容易遵循通過條形圖走過。這可能有助於消除您的實施缺失中的任何混淆。

https://bost.ocks.org/mike/bar/

有那個討厭的進入（）一次。

因爲我們知道選擇爲空，則返回的更新和退出 選擇也是空的，而我們只需要處理輸入選擇 它代表不存在其現有元素的新數據。我們 通過附加到輸入 選擇實例化這些缺失的元素。

var barEnter = barUpdate.enter（）。append（「div」）;