5

我有一个包含如下元素的 json 文件：

[{
    "name": "Manuel Jose",
    "ttags": ["vivant", "designer", "artista", "empreendedor"]
}]

我正在尝试使用此结构获取节点和边以完成如下图：

在此处输入图像描述

（图表取自d3.js 文档）

name和在我的 json 文件中都ttags引用节点，ttags实际上是节点和另一个节点之间的链接。

但是，我无法理解如何使用这个库 d3 及以上的 json 文件来创建这个图表。

    d3.json("/data/tedxufrj.json", function(classes) {
      var nodes = cluster.nodes(package.root(classes)),
          links = package.imports(nodes);

      vis.selectAll("path.link")
          .data(splines = bundle(links))
        .enter().append("path")
          .attr("class", "link")
          .attr("d", line);

      vis.selectAll("g.node")
          .data(nodes.filter(function(n) { return !n.children; }))
        .enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
        .append("text")
          .attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
          .attr("dy", ".31em")
          .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
          .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
          .text(function(d) { return d.key; });
    });

这是文件 package.js：

        (function() {
              packages = {

                // Lazily construct the package hierarchy from class names.
                root: function(classes) {
                  var map = {};

                  function find(name, data) {
                    var node = map[name], i;  
                    if (!node) {
                      node = map[name] = data || {name: name, children: []};
                      if (name.length) {
                        node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
                        node.parent.children.push(node);
                        node.key = name.substring(i + 1);
                      }
                    }
                    return node;
                  }

                  classes.forEach(function(d) {
                    find(d.name, d);
                  });

                  return map[""];
                },

                // Return a list of imports for the given array of nodes.
                imports: function(nodes) {
                  var map = {},
                      imports = [];

                  // Compute a map from name to node.
                  nodes.forEach(function(d) {
                    map[d.name] = d;
                  });

                  // For each import, construct a link from the source to target node.
                  nodes.forEach(function(d) {
                    if (d.imports) d.imports.forEach(function(i) {
                      imports.push({source: map[d.name], target: map[i]});
                    });
                  });

                  return imports;
                }

              };
            })();
4

2 回答 2

3

@wceo，实际上不需要root。它是可选的，用于创建视觉分隔。

@VividD，您需要做的是为“vivant”、“designer”、“artista”、“empreendor”创建节点，链接回它们自己。

我知道这很奇怪，但这就是所需要的。

所以你的 json 应该是这样的：

[
  {"name": "Manuel Jose", "ttags": ["vivant", "designer", "artista", "empreendedor"]},
  {"name": "vivant", "ttags": ["vivant"]},
  {"name": "designer", "ttags": ["designer"]},
  {"name": "artista", "ttags": ["artista"]},
  {"name": "empreendedor", "ttags": ["empreendedor"]}
]
于 2015-04-17T06:20:06.240 回答
3

看看这个：http ://testprogramming.googlecode.com/svn-history/r391/trunk/javascript/svg/d3/test/flare-imports.json

此示例显示了捆绑布局所需的数据结构。最初，数据结构是分层的，就像该图中的可视化一样：http: //mbostock.github.com/d3/ex/cluster.html

我会在你的位置做的是添加虚构的根来创建层次结构，如下所示：

[
{"name": "root.Manuel_Jose", "imports": ["root.vivant", "root.designer", "root.artista", "root.empreendedor"]},
{"name": "root.vivant", "imports": []},
{"name": "root.designer", "imports": []},
{"name": "root.artista", "imports": []},
{"name": "root.empreendedor", "imports": []}
]
于 2012-11-07T11:00:02.070 回答