使用d3.js和给定的json文件结构捆绑布局

Question

我有一个json文件,其元素如下:

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

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

(图表取自d3.js文档)

我name和ttagsjson文件中的两个都指节点,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;
                }

              };
            })();

Answer 1

看看这个： 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": []}
]