Не удалось создать дерево с помощью d3.tree () в d3v4

Trekkx спросил: 31 июля 2018 в 09:57 в: javascript

Я довольно новичок в библиотеке d3, и я пытаюсь построить дерево, используя функцию tree().

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

var tree = d3.tree()
    .size([2 * Math.PI, 500])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });var root = tree(buildTree(jsonObj));

- это то, что, кажется, дает мне ошибки, показанные на консоли хром:

Uncaught TypeError: Cannot read property 'z' of undefined
at firstWalk (d3.v4.js:10665)
at TreeNode.node_eachAfter [as eachAfter] (d3.v4.js:9876)
at tree (d3.v4.js:10625)
at HTMLInputElement.<anonymous> (better_radial_tree.html:86)

Все does возвращает корневой узел, который имеет. buildTree, у которых есть другие дети и т. д. Как ни странно, у меня не было проблем с конструированием, использующим d3.layout.tree, но это, похоже, не работает в d3.v4. Объект (ы), который я пытаюсь построить из дерева, следую этому макету:

Объект узла с children[], .name и .type.

Любые идеи, почему это не работает? Есть ли другие свойства, кроме .children[Node], которые мне нужно добавить к объектам? Любая помощь будет принята с благодарностью.

Я использую блок Radial Tidy Tree Майка Бостока (https://bl.ocks.org/mbostock/4063550) в качестве основы для этого. Остальная часть кода выглядит следующим образом:

            var link = g.selectAll(".link")
            .data(root.links())
            .enter().append("path")
              .attr("class", "link")
              .attr("d", d3.linkRadial()
                  .angle(function(d) { return d.x; })
                  .radius(function(d) { return d.y; }));        var node = g.selectAll(".node")
            .data(root.descendants())
            .enter().append("g")
              .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
              .attr("transform", function(d) { return "translate(" + radialPoint(d.x, d.y) + ")"; });            node.append("circle")
              .attr("r", 2.5);            node.append("text")
              .attr("dy", "0.31em")
              .attr("x", function(d) { return d.x < Math.PI === !d.children ? 6 : -6; })
              .attr("text-anchor", function(d) { return d.x < Math.PI === !d.children ? "start" : "end"; })
              .attr("transform", function(d) { return "rotate(" + (d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 180 / Math.PI + ")"; })
              .text(function(d) { return "test"; });        function radialPoint(x, y) {
            return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];
        }


1 ответ

Trekkx ответил: 31 июля 2018 в 11:03

Пришлось вычислить иерархический макет перед передачей моих данных в дерево.

var root = tree(d3.hierarchy(buildTree(jsonObj)));

Спасибо Марку ( https://stackoverflow.com/ пользователей / 16363 / знак )