问题描述
jsfiddle链接 https://jsfiddle.net/8vhsLor6/
jsfiddle link https://jsfiddle.net/8vhsLor6/
基本上我想用json对象替换tsv文件数据.我收到错误消息.输入错误
Basically I want to replace tsv file data with json object. I am getting error. Type error
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"}
];
推荐答案
d3.tsv在版本4中:
将数据从 Bostock的代码从TSV更改为JSON(或更准确地说，是JSON)时，变成一个变量)，则您忘了一些重要的事情:在新的D3 v4.x中，d3.tsv函数创建一个名为array属性 d3-dsv"rel =" nofollow> columns .
When changing the data from Bostock's code from a TSV to a JSON (or, more precisely, to a variable), you forgot something important: In the new D3 v4.x, d3.tsv function creates an array property called columns.
此属性包含TSV文件的所有标题作为数组.在原始代码中，如果您console.log(data.columns)，您将获得以下信息:
This property contains all the headers of the TSV file as an array. In the original code, if you console.log(data.columns), you'll get this:
["date", "New York", "San Francisco", "Austin"];
因此，基本上，为了使您的代码正常工作，我所做的就是添加此属性:
So, basically, for your code to work, all I did was adding this property:
data.columns = ["date", "New York", "San Francisco", "Austin"];
这是您的小提琴: https://jsfiddle.net/uz9rtcwd/
PS:您的日期格式错误.另外，您还必须解析data数组中的日期(此步骤与d3.tsv中的访问器功能相对应，但请记住d3.json没有访问器功能).
PS: You have a wrong date format. Also, you have to parse the dates in the data array (this step corresponds to the accessor function in the d3.tsv, but keep in mind that d3.json has no accessor function).
这篇关于如何在d3多折线图中使用json数据而不是tsv文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！