当列单独定义时，使用D3加载JSON

Loading JSON with D3 when columns are defined separately

本文关键字：使用 D3 加载 JSON 单独 定义      更新时间：2023-09-26

我正在使用d3.js，我很难理解如何加载一个代表表(列和行)的JSON，其中列是单独定义的。

一个正常的JSON，我没有问题加载可能看起来像这样:

[
{
    "id": 1,
    "name": "A green door",
    "price": 12.50
},
{
    "id": 2,
    "name": "A red door",
    "price": 12.50
},
{
    "id": 3,
    "name": "A blue door",
    "price": 12.50
}
]

相应的JSON与分隔的列看起来像这样:

{
    "columns": [
        {
            "ColumnName":"id",
            "DataType":"number"
        },
        {
            "ColumnName":"name",
            "DataType":"string"
        },
        {
            "ColumnName":"price",
            "DataType":"number"
        }
    ],
    "rows": [
        [
            "1",
            "A green door",
            "12.50"
        ],
        [
            "2",
            "A red door",
            "12.50"
        ],
        [
            "3",
            "A blue door",
            "12.50"
        ]
    ]
}

是否有可能使d3.js加载这种JSON而不重建一个新的JSON?

我收到的JSON的原始结构是不可更改的。

谢谢你的帮助

用d3加载分隔列(Format 2)的JSON不会有任何问题。你只需要在加载后转换JSON格式，以匹配d3布局所需的格式。为此，您可以尝试下面所示的代码。

d3.json("path/to/column_json_file_name.json", function(error, data) {
  if (error) return console.warn(error);
  var columns = data.columns.map(function(d){ return d.ColumnName });
  var jsonInRquiredFormat = data.rows.map(function(row,i){ 
      var ob = {}; 
      ob[columns[0]] = parseInt(row[0]); 
      ob[columns[1]] = row[1]; 
      ob[columns[2]] = parseFloat(row[2]); 
      return ob; 
  });
  console.log(jsonInRquiredFormat);
});

样本输入的输出:

[{
    "id": 1,
    "name": "A green door",
    "price": 12.5
}, {
    "id": 2,
    "name": "A red door",
    "price": 12.5
}, {
    "id": 3,
    "name": "A blue door",
    "price": 12.5
}]
相关文章：