Компоновка пакета с использованием d3.js и заданной файловой структуры json

У меня есть файл json с такими элементами:

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

Я пытаюсь получить узел и ребра, используя эту структуру для завершения график вида:

enter image description here

(диаграмма взята из документации d3.js)

Оба nameи ttagsв моем файле json относятся к узлам, 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;
                }

              };
            })();

5
задан VividD 29 May 2015 в 21:03
поделиться