D3.js - 将X轴和Y轴域分配为数据的最大值和最小值

Question

使用JSON数据，我可以使用

将域X和Y设置为各自数据属性的最小值和最大值

.y(d3.scale.linear().domain([0, d3.max(data, function(d) { return d.peopleVisited + 100; })]))

这是一个示例性的jsFiddle：http://jsfiddle.net/5H3Ay/15/

有人可以建议如何用csv数据实现这一点，使用d3.csv（）？

Answer 1

只要您正确格式化（CSV-）数据，设置域名应该没有任何区别。

D3 Wiki page for CSV表示，使用 d3.csv.parse（string [，accessor]）：

  

[For]以下CSV文件：

Year,Make,Model,Length
1997,Ford,E350,2.34
2000,Mercury,Cougar,2.38

  

生成的JavaScript数组是：

[
  {"Year": "1997", "Make": "Ford", "Model": "E350", "Length": "2.34"},
  {"Year": "2000", "Make": "Mercury", "Model": "Cougar", "Length": "2.38"}
]

...这是一个有效的JSON数组。 如果您在CSV文件中添加 peopleVisited 作为标题字段，那么您的代码应该已经可以使用了。

只需使用 csv.parse（）设置数据变量。

修改 您可以加载CSV，例如，通过使用以下访问器函数调用d3.csv（）：

var data = d3.map();
d3.csv("../path/to/your/file.csv", /* accessor */ function(d) {
    data.set(d.id, d.peopleVisited);
});

...使用列 id 作为键。