无法将 csv 加载到 d3答案

【问题标题】：unable to load csv to d3无法将 csv 加载到 d3
【发布时间】：2018-08-23 04:56:56
【问题描述】：

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

数据集 xyz.csv 如下所示

xvalue,yvalue
30,20
50,30
70,10

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

第一个块：

<!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>

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

【问题讨论】：

对我来说很好用，有错误信息吗？
@AndrewReid 图表应该是空白的。我在同一个文件夹中有一个带有 json 绑定的示例代码，效果很好，但不是这个
嗯，here 是您的代码（根据 csv 中的坐标显示圆圈），我不能让它工作的唯一方法是将函数放在单独的脚本中带有d3.csv()的标签下方的标签。
确实如此。我无法解释为什么它在 localhost:8000 上不起作用，但感谢您指向 bl.ockbuilder！
@santoku 您可能没有使用服务器。浏览器不允许加载本地文件。

标签： csv d3.js

【解决方案1】：

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

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

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

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

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

【讨论】：

感谢@pmkro。我正在使用 v4。将第一个块移动到 d3.csv('yourcsv.csv', function(data) { //whole data set // draw chart here }) 后它仍然没有显示任何内容，是我需要以某种方式解析 csv 值成数字？
是的，不幸的是，所有内容都作为字符串加载。可以只遍历数组并强制执行需要的内容。
所以我添加了这些 data.forEach(function(d) { xyz.xvalue = +xyz.xvalue; xyz.yvalue = +xyz.yvalue; }); //在此处绘制图表之前。什么都不显示。缺少什么？谢谢
如果您使用的是 v4，您的代码在 v3 中。这可能会导致问题。轴在 v4 中的定义不同。
我通常只是搜索，我发现 API 对我有好处d3 v3 API