使用d3.js和给定的json文件结构的Bundle布局 [英] Bundle layout using d3.js and given json file structure

问题描述

我有一个json文件包含这样的元素：

I have a json file with elements like this:

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

我想使用这个结构来获得节点和边来完成一个图形：

I'm trying to get the node and the edges using this structure to complete a graph like:

（图表取自 d3.js文档）

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

Both name and ttags in my json file refer to nodes, ttags are actually links between the node and another nodes.

但是，我不明白如何使用这个库d3和上面的json文件创建这个图。

But, I cannot understand how to create this diagram using this library d3 and above json file.

    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：

And this is file 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;
                }

              };
            })();

推荐答案

@wceo，根本不是必需的。它是可选的，用于创建视觉分离。

@wceo, the root is not actually required. It is optional and is used the create a visual separation.

@VividD，你需要做的是创建vivant，designer ，empreendedor，链接回自己。

@VividD, what you need to do is to create nodes for "vivant", "designer", "artista", "empreendedor", linking back to themselves.

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

I know it's weird but that is what's required.

所以你的json应该看起来像这样：

so your json should look like this:

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

这篇关于使用d3.js和给定的json文件结构的Bundle布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！