D3线发生器处理多个阵列 [英] D3 Line Generator Handling Multiple Arrays

问题描述

我在具有以下结构的JSON文件中有3个数组:

I have 3 arrays within a JSON file of the following structure:

我正在尝试将坐标数据的JSON文件解析为D3路径/行生成器可以读取的内容.我首先必须找到一种方法来确保值是实际数字而不是字符串.完整的讨论可以在这里找到: D3/JS映射JSON数据回调

I am trying to parse a JSON file of coordinate data into something that can be read by D3 path/line generators. I first had to find a way to ensure the values were actual numbers and not strings. A full discussion can be found here: D3/JS mapping a JSON data callback

该讨论促使我不仅考虑通过.map()将JSON数据格式化为数字，而且还考虑了行生成器可以理解的嵌套/压缩格式.这一直是我一直以来追求的目标.如上所述，我的JSON具有3个数组，分别为xs，ys和id. id仅控制颜色，并采用3个值中的1个(0,1,2).建议我使用这种方法:

That discussion prompted me to not only consider formatting the JSON data via .map() to numbers, but also consider a nested/zipped format that the line generator can make sense of. That is really the target I've been after all along. As depicted above, My JSON has 3 arrays, xs, ys and id. id only governs color, and takes 1 of 3 values (0,1,2). I was recommended this approach:

var obj = raw_json[0];
var data = obj.id.map((id, i) => [+id, +obj.xs[i], +obj.ys[i]]);

我的行生成器功能是:

var valueLine = d3.svg.line()
    .x(function(d) {return xScale(d.xs);})
    .y(function(d) {return yScale(d.ys)});

但是，我遇到了成千上万的错误，但是不幸的是，我在解析相关问题方面经验不足，因此我不确定该如何进行.

However I am getting tens of thousands of errors, and unfortunately I do not have that much experience with parsing related issues and I am not sure how to proceed.

完整块& JSON 此处.

Full block & JSON here.

推荐答案

当我们朝着正确的方向发展时，很高兴看到您就重组数据提出了我的建议.我建议您应该将每个点的三个单独的数组转换为单个数组的一个数组，以使线生成器的使用更加容易，并且不需要进行跨数组读取来收集点的数据.

Glad to see you took my advice on restructuring your data as we are moving in the right direction. I suggested that you should convert your three separate arrays into one array of individual arrays per point to make the use of the line generator more easy and to eliminate the need for cross-array reads to collect data for the points.

但是，这次您没有正确访问值.通过使用function(d) { return xScale(d.xs); }，您假设您的点是由具有属性xs和ys的对象表示的.但是，我建议的方法是通过将信息存储到数组中来摆脱这些属性.基本上有两种解决方法:

This time, though, you are not accessing your values correctly. By using function(d) { return xScale(d.xs); } you are assuming that your points were represented by objects having properties xs and ys. My suggested approach however got rid of these properties by storing the information into arrays. There are basically two ways around this:

1. 在保留数据结构的同时调整路径生成器的.x()和.y()回调.

var obj = raw_json[0];
var data = obj.id.map((id, i) => [+id, +obj.xs[i], +obj.ys[i]]);

// Remember, that d is a point's array [id, x, y]
var valueLine = d3.svg.line()
  .x(function(d) { return xScale(d[1]); })
  .y(function(d) { return yScale(d[2]); });

如果您更愿意将点的数据存储在对象中，则另一种解决方案是调整数据的构建方式.

If you prefer to store your points' data in objects instead, another solution would be to adjust how your data is built.

// Structure data into an array of objects {id, x, y}
var obj = raw_json[0];
var data = obj.id.map((id, i) => ({
  id: +id,
  x:  +obj.xs[i],
  y:  +obj.ys[i]
}));

// Keep your code as d now has properties x and y.
var valueLine = d3.svg.line()
  .x(function(d) { return xScale(d.x); })
  .y(function(d) { return yScale(d.y); });

这篇关于D3线发生器处理多个阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！