如何转换为 D3 的 JSON 格式? [英] How to convert to D3's JSON format?

问题描述

虽然遵循大量 D3 示例，但数据通常会按照 flare 中给出的格式进行格式化.json:

While following numerous D3 examples, data usually gets formatted in the format given in flare.json:

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      :

我有一个邻接表如下:

A1 A2
A2 A3
A2 A4

我想转换为上述格式.目前，我正在服务器端执行此操作，但是有没有办法使用 d3 的函数来实现此目的?我找到了一个here，但该方法似乎需要修改 d3 核心由于可维护性，我不喜欢的库.有什么建议吗?

which I want to convert to the above format. Currently, I am doing this on the server-side but is there a way to achieve this using d3's functions? I found one here, but the approach seems to require modification of the d3 core library which I am not in favor due to maintainability. Any suggestions?

推荐答案

没有规定的格式，因为您通常可以通过各种访问器功能(例如 hierarchy.children) 和 array.map.但是您引用的格式可能是最方便的树表示形式，因为它适用于默认访问器.

There's no prescribed format, as you can usually redefine your data through various accessor functions (such as hierarchy.children) and array.map. But the format you quoted is probably the most convenient representation for trees because it works with the default accessors.

第一个问题是您打算显示图表还是<一个 href="http://mbostock.github.com/d3/ex/tree.html" rel="noreferrer">树.对于图，数据结构根据 nodes 和链接.对于树，布局的输入是根节点，它可能有一个 子节点，并且其叶节点具有关联的值.

The first question is whether you intend to display a graph or a tree. For graphs, the data structure is defined in terms of nodes and links. For trees, the input to the layout is the root node, which may have an array of child nodes, and whose leaf nodes have an associated value.

如果您想显示一个图表，并且您所拥有的只是一个边列表，那么您需要遍历这些边以生成一个节点数组和一个链接.假设您有一个名为graph.csv"的文件:

If you want to display a graph, and all you have is a list of edges, then you'll want to iterate over the edges in order to produce an array of nodes and an array of links. Say you had a file called "graph.csv":

source,target
A1,A2
A2,A3
A2,A4

您可以使用 d3.csv 加载此文件，然后生成节点数组和链接:

You could load this file using d3.csv and then produce an array of nodes and links:

d3.csv("graph.csv", function(links) {
  var nodesByName = {};

  // Create nodes for each unique source and target.
  links.forEach(function(link) {
    link.source = nodeByName(link.source);
    link.target = nodeByName(link.target);
  });

  // Extract the array of nodes from the map by name.
  var nodes = d3.values(nodeByName);

  function nodeByName(name) {
    return nodesByName[name] || (nodesByName[name] = {name: name});
  }
});

然后您可以将这些节点和链接传递给力布局以可视化图形:

You can then pass these nodes and links to the force layout to visualize the graph:

• http://bl.ocks.org/2949937

如果你想生成一个树，那么你需要做一种稍微不同的数据转换形式来累积每个父节点的子节点.

If you want to produce a tree instead, then you'll need to do a slightly different form of data transformation to accumulate the child nodes for each parent.

d3.csv("graph.csv", function(links) {
  var nodesByName = {};

  // Create nodes for each unique source and target.
  links.forEach(function(link) {
    var parent = link.source = nodeByName(link.source),
        child = link.target = nodeByName(link.target);
    if (parent.children) parent.children.push(child);
    else parent.children = [child];
  });

  // Extract the root node.
  var root = links[0].source;

  function nodeByName(name) {
    return nodesByName[name] || (nodesByName[name] = {name: name});
  }
});

像这样:

• http://bl.ocks.org/2949981

这篇关于如何转换为 D3 的 JSON 格式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！