Question

我一直在搜索我的一堆帖子和教程试图找出d3，我认为我的大部分内容都没有找到，但这不是划清界限，我不知道为什么。这是一个简单的d3.line()图表。必须将数据转换为适合.line()的格式，并且它是。我还在控制台中确认该数据的格式为

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

如果有人能帮我解决这个问题，我会很感激。还有什么好的教程可以用于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（）时，我们切换到代表尚未成为的数据的子选择映射到一个元素，因为它们上还没有足够的元素页面表示所有当前数据集。换句话说，如果有的话我们的数据集中的基准比页面上的元素更多，“输入” 子选择代表尚未添加的元素。

从男人本人那里，Bostock可以轻松地在条形图上浏览。这可能有助于消除您的实施缺失中的任何混淆。

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

再次讨厌进入（）。

由于我们知道选择为空，因此返回更新并退出   选择也是空的，我们只需要处理输入选择   表示没有现有元素的新数据。我们   通过附加到enter来实例化这些缺少的元素   选择。

var barEnter = barUpdate.enter（）。append（“div”）;

D3.js只绘制一条垂直线而不是实际绘图

1 个答案: