Javascript 如何转换为 D3 的 JSON 格式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11088303/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to convert to D3's JSON format?
提问by Legend
While following numerous D3 examples, data usually gets formatted in the format given in flare.json:
在遵循大量 D3 示例时，数据通常会以flare.json 中给出的格式进行格式化：
{
"name": "flare",
"children": [
{
"name": "analytics",
"children": [
{
"name": "cluster",
"children": [
{"name": "AgglomerativeCluster", "size": 3938},
:
I have an adjacency list as follows:
我有一个邻接表如下：
A1 A2
A2 A3
A2 A4
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?
我想转换为上述格式。目前，我正在服务器端执行此操作，但是有没有办法使用 d3 的函数来实现此目的？我在这里找到了一个，但该方法似乎需要修改 d3 核心库，由于可维护性，我不赞成这样做。有什么建议？
回答by mbostock
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.
没有规定的格式，因为您通常可以通过各种访问器函数（例如hierarchy.children）和array.map重新定义数据。但是您引用的格式可能是树最方便的表示形式，因为它适用于默认访问器。
The first question is whether you intend to display a graphor a tree. For graphs, the data structure is defined in terms of nodesand 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.
第一个问题是您打算显示图形还是树。对于图，数据结构是根据节点和链接定义的。对于树，布局的输入是根节点，它可能有一个子节点数组，其叶节点有一个关联值。
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":
如果您想显示一个图形，并且您所拥有的只是一个边列表，那么您将需要遍历这些边以生成一个节点数组和一个链接数组。假设您有一个名为“graph.csv”的文件：
source,target
A1,A2
A2,A3
A2,A4
You could load this file using d3.csvand then produce an array of nodes and links:
您可以使用d3.csv加载此文件，然后生成一组节点和链接：
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:
然后，您可以将这些节点和链接传递到力布局以可视化图形：
If you want to produce a treeinstead, 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});
}
});
Like so:
像这样：
回答by Lars Kotthoff
D3 doesn't require a specific format. It all depends on your application. You can certainly convert an adjacency list to the format used in flare.json, but this again would be application-specific code. In general, you can't do that as adjacency lists as such don't have "head" or "root" elements you would need to build a tree. In addition, you would need to handle cycles, orphans etc. separately.
D3 不需要特定的格式。这一切都取决于您的应用程序。您当然可以将邻接列表转换为flare.json 中使用的格式，但这又是特定于应用程序的代码。通常，您不能这样做，因为这样的邻接列表没有构建树所需的“头”或“根”元素。此外，您需要单独处理循环、孤儿等。
Given that you're currently doing the conversion on the server side, I'd be tempted to say that "if it ain't broken, don't fix it" ;)
鉴于您目前正在服务器端进行转换，我很想说“如果它没有损坏，请不要修复它”;)
