Question

我只是从D3开始，无法绑定来自外部文件的数据。请注意，我是在本地提供此html文件并从服务器打开它，而不是从文件打开（请参见下面的屏幕截图）。

当我尝试绑定到html文件（“ d2”）中定义的var时，一切正常。但是，当我尝试绑定到从csv文件（“ d”）读取的数据时，即使在开发人员工具中可以看到该数据，DOM元素也不会出现预期的情况。

为什么第一个代码能按预期工作，而第二个代码却无法工作？

我认识到这可能很明显，但未能在文档或其他问题中找到（或至少理解了）答案。

我已经读过this question，可能是相同的，但是建议的答案尚未被接受。正如一位受访者所建议的那样，我使用了csv格式，但是并不能解决问题。 This question似乎并不适用，因为我已经采取了避免异步加载问题的建议。

在此先感谢您的帮助！

这是按预期方式工作的代码段（在本文结尾处包含完整的html文件）：

var d2 = [1,2,3,4,5];
d3.csv("./Fake2.csv", function(d)
{
    console.log(d2);

    d3.select("body").selectAll("p")
        .data(d2)
        .enter()
        .append("p")
        .text("New paragraph");

});

此页面中的结果（左侧的Chrome开发人员工具截屏）：

请注意，控制台中有七个条目，因为csv文件具有七个数据行（请参见下面的文件）。

但是，当我更改d3代码以绑定到从csv文件（“ d”）读取的数据时，没有添加到DOM中的段落元素，并且网页上也没有文本。但是，在控制台中，数据可以正确显示。

调整后的代码（在d3.csv块中将“ d2”更改为“ d”）：

var d2 = [1,2,3,4,5];
d3.csv("./Fake2.csv", function(d)
{
  console.log(d);


  d3.select("body").selectAll("p")
    .data(d)
    .enter()
    .append("p")
    .text("New paragraph");

});

产生此“空白网页”输出：

这是整个HTML文件：

<!-- Attempt1.html -->

<!DOCTYPE html>


<html>
<head>
    <meta charset="utf-8">
    <title>School Finance Viz</title>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <script type="text/javascript" src="d3.js"></script>
</head>
<body>
</body>

<script type="text/javascript">

var d2 = [1,2,3,4,5];
d3.csv("./Fake2.csv", function(d)
{
    console.log(d2);

    d3.select("body").selectAll("p")
        .data(d2)
        .enter()
        .append("p")
        .text("New paragraph");

});

</script>

这是整个csv文件：

Category
1000
500
100
400
1600
300
100

请注意，此解决方案（下面接受）与this question的解决方案相同。根本的问题实际上是相同的，但是问题的症状不同，对于D3的新手来说，这是一个不同的问题。

Answer 1

好像您使用d3.v5

在d3 v5中引入了fetch API 方法d3.csv返回承诺

尝试一下：

d3.csv("./Fake2.csv").then(function(d){
    d3.select("body").selectAll("p")
        .data(d2)
        .enter()
        .append("p")
        .text("New paragraph");
})

PS。提取API是一项现代功能，并非每个浏览器或引擎都支持它。

D3 Noob：无法绑定到从csv文件读取的数据

1 个答案: