Question

我试图使用从csv导入的数据，对学术工资进行简单的散点图可视化。这是我的Javascript：

  var w = 800;
  var h = 500;
  var padding = 50;
  var data = []
  d3.csv('salaries.csv', function(dset){
    data = dset.map(function(d) { 
      return [ 
      +d["Year"], 
      +d["MU_Professor"],
      +d["NAS_Professor"],
      d["Department"]
    ]; });
  });

  var xScale = d3.scale.linear()
      .domain([1989, 2009])
      .range([padding,w-padding]);
  var yScale = d3.scale.linear()
      .domain([0, 200000])
      .range([h-padding,padding]);
  var svg = d3.select("body")
     .append("svg")
     .attr('width',w)
     .attr('height',h);

  //Axes
  var xAxis = d3.svg.axis()
    .scale(xScale)
    .ticks(5)
    .tickFormat(d3.format("d"))
    .orient("bottom");
  svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);

  var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(5);
  svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);

  //Points
  svg.selectAll("g")
     .data(data)
     .enter()
     .append("circle")
     .attr("cx", function(d){
       return xScale(d[0]);
     })
     .attr("cy", function(d){
        return yScale(d[1]);
     })
     .attr("r", function(d){
        return 3;
     })
    .attr("id", function(d, i){
      return i;
    });

此代码运行时没有错误，但这些点在加载时不会呈现。如果我在浏览器中打开Javascript控制台，然后复制并粘贴最后一个代码块（上面标有//Points），则实际渲染点。

以前有人遇到过这个吗？有人可以解释我的代码导致了什么吗？

Answer 1

是的 - 问题是您的浏览器在您的浏览器有机会加载CSV并将点数绘制到画布之前执行'points'块。

让我解释一下。

您的浏览器会按顺序执行从上到下的代码。这部分 -

d3.csv('salaries.csv', function(dset){
    data = dset.map(function(d) { 
      return [ 
      +d["Year"], 
      +d["MU_Professor"],
      +d["NAS_Professor"],
      d["Department"]
    ]; });
  });

告诉D3自行启动并加载.csv - 但在此之前，浏览器继续运行并执行其余代码。这是一种“异步”方法。

您可以尝试将// points块移动到映射来自csv的点的相同函数中。

为什么我的d3可视化在控制台中呈现而在浏览器中不呈现？

1 个答案: