javascript - 如何在 d3 多折线图中使用 json 数据而不是 tsv 文件？

Question

jsfiddle 链接 https://jsfiddle.net/8vhsLor6/

基本上我想用 json 对象替换 tsv 文件数据。我收到错误。输入错误

var cities = data.columns.slice(1).map(function(id) {

我有这样的数据

var data = [
{date:"1-May-12","New York":"58.13", "San Francisco":"58.13", "Austin": "43"},
{date:"30-Apr-12","New York":"53.98" , "San Francisco":"48.13", "Austin": "53"},
{date:"27-Apr-12","New York":"67.00", "San Francisco":"38.13", "Austin": "63"},
{date:"26-Apr-12","New York":"89.70", "San Francisco":"28.13", "Austin": "73"},
{date:"25-Apr-12","New York":"99.00", "San Francisco":"18.13", "Austin": "83"}
];

Answer 1

版本 4 中的 d3.tsv:

当更改来自 Bostock's code 的数据时从 TSV 到 JSON(或者更准确地说，到变量)，您忘记了一些重要的事情:在新的 D3 v4.x 中，d3.tsv 函数创建了一个数组属性 称为 columns .

此属性包含 TSV 文件的所有 headers 作为数组。在原始代码中，如果你 console.log(data.columns)，你会得到这个:

["date", "New York", "San Francisco", "Austin"];

所以，基本上，为了让您的代码正常工作，我所做的就是添加此属性:

data.columns = ["date", "New York", "San Francisco", "Austin"];

这是您的 fiddle :https://jsfiddle.net/uz9rtcwd/

PS:你的日期格式有误。此外，您必须解析 data 数组中的日期(此步骤对应于 d3.tsv 中的访问器函数，但请记住 d3. json 没有访问函数)。