Question

我尝试了多个教程并查看了之前的问题，但仍然有问题将csv加载到d3，因为所有材料都使用不同的方法。

数据集xyz.csv看起来像这样

<!DOCTYPE html>

<html>
<head>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

    <script type="text/javascript"> function draw(data) {


    var margin = 50,
        width = 700,
        height = 300,
        x_extent = d3.extent(data, function(d){return d.xvalue}),
        y_extent = d3.extent(data, function(d){return d.yvalue});

    var x_scale = d3.scale.linear()
        .range([margin,width-margin])
        .domain(x_extent)

    var y_scale = d3.scale.linear()
        .range([height-margin, margin])
        .domain(y_extent)

    var x_axis = d3.svg.axis().scale(x_scale)
    var y_axis = d3.svg.axis().scale(y_scale).orient('left')


    d3.select("body")
      .append('svg')
        .attr('width', width)
        .attr('height', height)
      .selectAll('circle')
      .data(data)
      .enter()
      .append('circle')
        .attr('cx', function(d){return x_scale(d.xvalue)})
        .attr('cy', function(d){return y_scale(d.yvalue)})
        .attr('r', 5)


}
    </script>

这是在尝试几个小时后无法运行的代码：

第一个块：

<body>
 <script>
     d3.csv('xyz.csv', draw);
 </script> 
</body> 
</html>

然后

  https://plnkr.co/edit/sUHLvFnbQv6qpXNZkG0J

为初学者绑定csv有哪些简单的方法？感谢。

Answer 1

这在很大程度上取决于您使用的d3版本。 d3 v5使用fetch API并返回需要以下代码的承诺。

＆＃13;

d3.csv('yourcsv.csv')
  .then(function(data) {
      // data is now whole data set
      // draw chart in here!
  })

＆＃13;

另一方面，

d3 v4使用xmlhttp方法，并且不返回需要此代码的承诺

＆＃13;

d3.csv('yourcsv.csv', function(data) {
    //whole data set
    // draw chart here
})

＆＃13;

csv加载是异步的，因此请确保在csv函数中运行图表代码。

无法将csv加载到d3

1 个答案: