2

我对 d3 和一般的 javascript 还是很陌生，所以我见过的大多数做法都与简单数组有关，但从不与对象有关。现在，我正在尝试通过使用 json 文件中的数据来创建一个包含一周数据的简单图表。首先，数据结构看起来有点像下面的任意值：

{"2013-08-21":{"orders":"10","revenue":"1000"},
{"2013-08-22":{"orders":"20","revenue":"1800"},
{"2013-08-23":{"orders":"15","revenue":"1200"},
...}

我现在面临的问题是试图弄清楚如何有效地将日期传递到 xScale 域，以及将订单或收入传递到 yScale 域。如果它是 CSV 或 TSV 文件，我可以使用它：

xScale.domain(d3.extent(data, function(d) {return d.date;}));
yScale.domain(d3.extent(data, function(d) {return d.orders;}));

但是当我尝试对 json 对象做同样的事情时，它告诉我以下内容：

Uncaught TypeError: #<Object> is not a function

有人可以帮助阐明这个问题吗？我可以尝试为日期、订单和收入创建列表数组，但还有其他方法吗？

谢谢你的时间！

编辑

导入 json 文件后尝试映射数据时会发生 TypeError：

d3.json("report.json", function(error, json) {
    if (error) return console.warn(error);
    dataset = json;
    dataset = dataset.map(function(d){
        var date = d3.keys(d)[0];
        d[date].date = date;
        return d[date];
    });
});

具体来说，在这一行：

dataset = dataset.map(function(d){ ... }) 

Uncaught TypeError: Object #<Object> has no method 'map'
4

1 回答 1

4

您在这里基本上有两个选择： 1. 将您的数据转换为更容易处理的格式 2. 尝试处理您当前的格式。

我认为（1）在大多数情况下会让你的生活更轻松：

data = data.map(function(d) {
    // get the date
    var date = d3.keys(d)[0];
    // put it into the inner object
    d[date].date = date;
    // return the inner object
    return d[date];
});

这给了你像

{
  "orders": "10",
  "revenue": "1000",
  "date": "2013-08-21"
}

这更容易处理。在您执行此操作时解析日期可能也是一个好主意。

于 2013-08-30T17:46:25.690 回答