Question

在我开始学习数据可视化美丽世界的秘密的过程中，我遇到了 D3.js 的一些困难以及外部数据的加载过程来自csv或json文件。

我有点像JS的新手，所以我想得到专家的帮助。在我的代码下面：

    var w = 500;
    var h = 500;

    // I'm setting up an empty array
    var csvData = [];

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

    // Get the data
    d3.csv("csv/cities.csv", function(dataset) {
        for(var i = 0; i < dataset.length; i++) {
             csvData.push(dataset[i]);
        }
    });

    // Draw data
    svg.select("body").selectAll("p")
            .data(csvData)
            .enter()
            .append("p")
            .text(function(d) { return d });

嗯，我不确定我是否理解加载数据和处理这些值的正确方法。有人可以这么善意给我一个暗示吗？我可以访问csvData数组（使用开发人员工具中的控制台）但我无法看到// Draw data部分返回的任何数据。

这是csv文件：

csv/cities.csv

city,state,population,land area
seattle,WA,652405,83.9
new york,NY,8405837,302.6
boston,MA,645966,48.3
kansas city,MO,467007,315.0

由于

Answer 1

下面的代码段是一个ajax调用，它异步加载csv / cities.csv：

// Get the data
d3.csv("csv/cities.csv", function(dataset) {
    for(var i = 0; i < dataset.length; i++) {
         csvData.push(dataset[i]);
    }
});

因此绘制数据部分应如下所示：

  // Get the data
    d3.csv("csv/cities.csv", function(dataset) {
        for(var i = 0; i < dataset.length; i++) {
             csvData.push(dataset[i]);
        }
    // Draw data
    svg.select("body").selectAll("p")
            .data(csvData)
            .enter()
            .append("p")
            .text(function(d) { return d });
    });

下一个错误：

您无法在SVG中添加p DOM，这就是您没有看到p DOM元素的原因。我已将p DOM元素附加到修复问题的正文DOM中。

工作小提琴here

使用D3.js加载外部

1 个答案: