Question

我正在尝试加载带有x和y坐标的csv文件，并使用该坐标创建圆圈。我已经了解了如何加载csv文件，我可以在控制台中记录坐标，但我不明白为什么当我尝试创建圆时，日志函数返回Not_a_number。我的data.map函数有问题吗？感谢

这里是代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="d3/d3.v3.js"></script>
<style type="text/css">
    /* No style rules here yet */       
</style>
</head>
<body>
<script type="text/javascript">

    //Width and height
    var w = 900;
    var h = 500;
    var padding = 20;
    var dataset = [];

    d3.csv("dataset.csv", function(data) {
      dataset = data.map(function(d,i) { 
        //THIS WORKS
        console.log(d);
        console.log(i);
        return [ +d["x-coordinate"], +d["y-coordinate"] 
        ]; });


    //Create SVG element
    var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")
       .attr("cx", function(d) {
            //THIS DOESNT WORK
            console.log(d);
            return d[0];
       })
       .attr("cy", function(d) {
            return d[1];
       })
       .attr("r", function(d) {
            return d[1];
       })

    });

</script>
</body>
</html>

Answer 1

您只能在dataset内异步加载后才能访问d3.csv。

d3.csv内的代码执行异步，这意味着它只会在文件加载后运行，不能保证在它下面的代码之前运行。

d3.csv("dataset.csv", function(data) {
  dataset = data.map(function(d,i) { 
    //THIS WORKS
    console.log(d);
    console.log(i);
    return [ +d["x-coordinate"], +d["y-coordinate"] 
    ]; });

  //Create SVG element
  var svg = d3.select("body")
              .append("svg")
              .attr("width", w)
              .attr("height", h);

  svg.selectAll("circle")
     .data(dataset)
     .enter()
     .append("circle")
     .attr("cx", function(d) {
          //THIS DOESNT WORK
          console.log(d);
          return d[0];
     })
     .attr("cy", function(d) {
          return d[1];
     })
     .attr("r", function(d) {
          return d[1];
     })
     .text("hello world");

});

或者，创建一个方法并将dataset传递到d3.csv内的该方法。

D3 data.map函数出错

1 个答案: