问D3.js只是画了一条垂直线，而不是真正的图形
EN

Stack Overflow用户

提问于 2017-07-26 05:26:34

回答 1查看 179关注 0票数 1

我已经搜索了一大堆文章和教程，试图弄清楚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);

现在，适用于d3.line()的形式的inLineData是形式上的对象数组。我已经通过控制台确认了数据的有效性。

[{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 + ")";
      });

javascript

d3.js

data-visualization

DNS解析特惠

DNS解析提供智能解析、流量调度、安全防护等服务

回答 1

Stack Overflow用户

发布于 2017-07-26 05:33:52

在您的代码片段中，似乎缺少D3生命周期方法，特别是输入()。

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

，但是首先，我们只有一个空白页面，没有段落。我们如何在页面上获得新的段落，来表示数据？输入.enter()。当我们在现有选择上调用enter()时，我们切换到表示尚未映射到元素的数据的子选择，因为页面上还没有足够的子选择来表示所有当前数据集。换句话说，如果我们的数据集中的数据比页面上的元素多，那么“enter”子选项表示尚未添加的元素。

从这个人本身来看，博斯托克在条形图上很容易理解。这可能有助于清除您的实现中缺少的任何令人困惑的东西。

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

又出现了令人讨厌的enter()。