javascript - 如何在 D3 中从 CSV 切换到 JSON？ Github 类似图表

Question

我想尝试this图表，但不知道如何从 CSV 切换到 JSON。

我有这个模型(每个对象都有 id、createdAt、numberOfWords 字段):

{ 
{ 
_id: someId, 
createdAt: 05/31/2016, 
numberOfWords: 0 < number < 1000
},
 ..., 
... 
}

• 我应该改变吗 d3.csv 到 d3.json？

• 我可以传递变量而不是包含数据的文件吗？

• 我应该仅在 d3.csv 函数内部更改代码吗？还是还有其他依赖于数据表示的地方？

我知道我绝对应该更改传递给汇总函数的函数？所以...

• 我该如何正确更改？

Answer 1

假设你有一些像这样的 JSON 文件:

[
  {
    "_id": "id1",
    "createdAt": "05/31/2016",
    "numberOfWords": 996
  },
  {
    "_id": "id2",
    "createdAt": "04/15/2016",
    "numberOfWords": 20
  },
  {
    "_id": "id3",
    "createdAt": "02/22/2015",
    "numberOfWords": 350
  }
]

您首先应该在示例中找到日期格式并将其更改为您正在使用的格式，因为它将用于匹配条目:

format = d3.time.format("%m/%d/%Y"); // changed to your time format

您还必须选择范围，因为显示的示例不包含适合您的数据的日历(从 2016 年开始)。因此，让我们将其减少到 2 个 SVG(2 年):

var svg = d3.select("body").selectAll("svg")
        .data(d3.range(2015, 2017)) // the range is 2015 and 2016

您现在可以运行该示例，看看它是否只加载这两个日历。

啊，你的色标可能是基于字数的，你说的是0到1000，所以也改变这一行:

var color = d3.scale.quantize()
              .domain([0, 1000]) // from 0 to 1000 words
              .range(...);

示例中的范围选择 CSS 中声明的不同颜色。

由于您有一个 JSON 文件，请将其加载为 JSON:

d3.json("yanis.json", function(error, json) {
    if (error) throw error;

现在您必须重新排列数据，使其成为按日期索引的 map 。有很多方法可以做到这一点。您可以使用 nest() 函数(如示例所示)，并根据文件中的属性进行调整:

var data = d3.nest()
            .key(function(d) {
                return d.createdAt; // the key is your date
            })
            .rollup(function(d) {
                return {"numberOfWords": d[0].numberOfWords, "id": d[0]._id}; // return an object containing the data for each key
            })
            .map(json);

之前创建的每个矩形都绑定(bind)到日期字符串:

var rect = svg.selectAll(".day")
        .data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
        .enter().append("rect")

现在我们将比较绑定(bind)到每个矩形的日期字符串，并检查它是否存在于 data 集中。如果找到匹配项，它将收到一个 CSS 类，该类决定其填充颜色:

rect.filter(function(d) {
    return d in data;   // proceeds only for matching dates
}).attr("class", function(d) {
    return "day " + color(data[d].numberOfWords);  // apply a CSS class
}) 

最后，您还应该更改 title 选择，以便工具提示将显示一些重要的内容，例如字数或 ID:

.select("title")
    .text(function(d) { 
        return d + ": " + data[d].numberOfWords + " words"; 
    });

是的，如果您愿意，您可以简单地将整个 JSON 文件分配给一个变量，而不是加载它。这是 working example :