D3/JS映射JSON数据回调 [英] D3/JS mapping a JSON data callback

问题描述

我已经看到许多带有d3.csv()回调映射的示例，例如:

I have seen many examples with d3.csv() callback mappings such as:

var data = raw_data.map(function(d) { return 
    variable1 : +d.variable1,
    variable2 : +d.variable2
});

但是我试图弄清楚如何使用map.()进行JSON回调.原因是我有一个属性d:预期数字"MaNn"，"NaNz"错误.如果我没记错的话，该错误通常与数据解析为字符串有关. JSON看起来是数字/浮点数，但以防万一D3将我的数据解析为字符串，我想将其映射为数字，以便从控制台日志错误中排除解析为字符串元凶的原因.因此，我尝试使用一元+:

However I'm trying to figure out how to use map.() for a JSON callback. The reason being is I have a attribute d: expected number, "MaNn", "NaNz" error. This error if I'm not mistaken, is often associated with data being parsed as a string. The JSON looks to be in numbers/floats, but just in case D3 is parsing my data as strings, I want to map it as numbers so I can rule out the parsed as a string culprit from my console log error. So, what I tried was roughly the same as the csv case above, using the unary +:

var json = raw_json.map(function(d)  { return
    xs: +d.xs,
    ys: +d.ys,
    id: +d.id
});

这时，错误仍然存​​在.但是，我不确定我是否完全拒绝字符串解析错误的空假设，因为我不确定自己的JSON数据.map()是否具有正确的语法.我现在有点陷入困境.

At this point, the error was still there. However I'm not sure if I fully rejected my null hypothesis of string parse error because I'm not totally confident that my JSON data .map() is of the right syntax. I'm kind of in limbo at the moment.

问题:我的.map()完全错误吗?我还能做些什么来排除预期的数字错误吗?

Question: Is my .map() totally wrong? Is there something more I can do to troubleshoot the expected number error?

我意识到JSON文件具有广泛的数据结构.这是我的console.log(raw_json)在控制台日志中的样子的屏幕截图:

I realize that JSON files have a wide range of data structures. Here is a screen shot of what my console.log(raw_json) looks like in the console log:

推荐答案

您的.map()与您的JSON数据不匹配.您的JSON由一个数组组成，其中一个对象包含三个数组，分别用于id，xs和ys.要将所有这些字符串转换为数值，您需要三个单独的循环:

Your .map() does not match your JSON data. Your JSON consists of one array having one object containing three arrays for id, xs and ys. To convert all those strings to numerical values you need three separate loops:

var obj = raw_json[0];
obj.id = obj.id.map(id => +id);
obj.xs = obj.xs.map(x => +x);
obj.ys = obj.ys.map(y => +y);

或者，最好，因为您不需要创建新的数组而只转换为数字，所以您也可以使用.forEach()而不是.map()进行现场转换.

Or, preferably, since you do not need to create new arrays while only converting to numbers, you could also do the conversion on the spot using .forEach() instead of .map().

const toNum = (d, i, a) => { a[i] = +d };   // Conversion function

var obj = raw_json[0];
obj.id.forEach(toNum);
obj.xs.forEach(toNum);
obj.ys.forEach(toNum);

看看下面的工作示例:

var raw = `
  [{
    "id": ["1", "2", "3"],
    "xs": ["11", "12", "13"],
    "ys": ["21", "22", "23"]
  }]
`;
var data = JSON.parse(raw);

const toNum = (d, i, a) => { a[i] = +d };   // Conversion function

var obj = data[0];
obj.id.forEach(toNum);
obj.xs.forEach(toNum);
obj.ys.forEach(toNum);

console.dir(data);

这篇关于D3/JS映射JSON数据回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！