将基本 CSV 数据加载到 D3

Question

我一直在尝试将一些数据从 CSV 加载到 D3 中。结构是：

variety, amount
a, 1
b, 3
c, 7

我正在尝试将数量数据放入数组中，但尝试了各种教程和论坛帖子中描述的所有方法都没有成功。

我试过：

d3.csv("data.csv", function(data) {
    var dataset = console.log(data["amount"]);
});


var dataset = d3.csv("data.csv", function(data) {
    dataset = console.log(data["amount"]);
});


d3.csv("data.csv", function(data) {
    dataset = console.log(data.amount);
});


d3.csv("data.csv", function(data) {
    var dataset = console.log(data);
});


d3.csv("data.csv", function(data) {
    var dataset = data);
});


d3.csv("data.csv", function(data) {
            return {amount: +data};
});

d3.csv("data.csv", function(data) {
            dataset = data.map(function(d) { return [+d["amount"], +d["variety"]];});
});

如果其中一些尝试很荒谬，我深表歉意，但我今天才开始玩 D3。感谢您的帮助。

Answer 1

我有一个类似的plnkr给你，请注意加载d3 lib的地方。

<body>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  ...

pnlkr

Answer 2

问题在于逗号后的空space。由于 space，它被视为“数量”而不是 "amount"。也可以尝试只安慰数据而不是数据['amount']。您会意识到它是一个对象数组，而不仅仅是一个对象。因此，您必须遍历数组才能获得金额。

d3.csv("data.csv", function(data) {
  console.log(data);
  var len = data.length;
  for (var i = 0; i < len; i++) {
    console.log(data[i].amount);
  }
});

将基本 CSV 数据加载到 D3

Load basic CSV data to D3

javascript

csv

d3.js