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”）;