Question

我正在尝试使用d3和强制布局创建图形。我使用了以下示例http://bl.ocks.org/mbostock/1062288来开始：

enter image description here

我还需要图像和标签，所以我查看了这个示例http://bl.ocks.org/mbostock/950642以了解如何添加它们。

我的图表也将变得更大，具体取决于用户与节点的交互，因此如果用户点击没有子节点的节点，则ajax请求将转到后端服务以请求更多节点。该图旨在用作关系发现应用程序。我创建了以下jsfiddle http://jsfiddle.net/R2JGa/7/来了解我想要实现的目标。

它的工作相对较好，但我有一个恼人的问题：当向图表中添加新节点时，旧节点会以某种方式错位。例如，我从3个节点开始，根节点是“flare”。其他2个节点是“动画”和“分析”。在我的示例中，只要您单击当前没有子节点的节点，子节点将始终为“x”，“y”，“z”，“t”。扩展几个节点后，您将看到“animate”或“analytics”未链接到根节点“flare”，而是链接到其他一些节点（x，y，z，t）。或者有时，如果展开x或y或z或t，则子节点具有重复的x或y或z或t。如果单击“flare”隐藏整个图形，然后重新打开“flare”，您将看到节点已正确链接和命名。

我似乎无法理解为什么会这样。有人可以在这里说清楚吗？我仍然是d3的新手，发现它真的很有趣，但这些问题太烦人了......

以下是代码：

var w = 960,
            h = 800,
            node,
            link,
            root;

    var force = d3.layout.force()
            .charge(-1000)
            .size([w, h]);

    var vis = d3.select("#chart").append("svg:svg")
            .attr("width", w)
            .attr("height", h);

    d3.json("data.json", function (json) {
        root = json;
        update();
    });

    function update() {
        var nodes = flatten(root);
        nodes.reverse();
        nodes = nodes.sort(function (a, b) {
            return a.index - b.index;
        });

        var links = d3.layout.tree().links(nodes);

        console.log(nodes);

        // Restart the force layout.
        force
                .nodes(nodes)
                .links(links)
                .linkDistance(55)
                .start();


        var link = vis.selectAll(".link")
                .data(links);

        link.enter().append("line")
                .attr("class", "link");

        link.exit().remove();

        var node = vis.selectAll("g.node")
                .data(nodes)


        var groups = node.enter().append("g")
                .attr("class", "node")
                .attr("id", function (d) {
                    return d.id
                })
                .on('click', click)
                .call(force.drag);


        groups.append("image")
                .attr("xlink:href", "https://github.com/favicon.ico")
                .attr("x", -8)
                .attr("y", -8)
                .attr("width", 16)
                .attr("height", 16);


        groups.append("text")
                .attr("dx", 12)
                .attr("dy", "0.35em")
                .style("font-size", "10px")
                .text(function (d) {
                    console.log(d);
                    return d.name
                });


        node.exit().remove();


        force.on("tick", function () {
            link.attr("x1", function (d) {
                return d.source.x;
            })
                    .attr("y1", function (d) {
                        return d.source.y;
                    })
                    .attr("x2", function (d) {
                        return d.target.x;
                    })
                    .attr("y2", function (d) {
                        return d.target.y;
                    });

            node.attr("transform", function (d) {
                return "translate(" + d.x + "," + d.y + ")";
            });
        });
    }


    // Color leaf nodes orange, and packages white or blue.
    function color(d) {
        return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
    }

    // Toggle children on click.
    function click(d) {
        console.log(d);
        if (d.children) {
            d._children = d.children;
            d.children = null;
            update();
        } else if (d._children) {
            d.children = d._children;
            d._children = null;
            update();
        }
        else {
            d3.json("expand.json", function (json) {
                d.children = json.children;
                update();
            })
        }
    }

    // Returns a list of all nodes under the root.
    function flatten(root) {
        var nodes = [], i = 0;

        function recurse(node) {
            if (node.children) node.children.forEach(recurse);
            if (!node.id) node.id = ++i;
            nodes.push(node);
        }

        recurse(root);
        return nodes;
    }

以下是我要求的2个json文件：

data.json

{
    "name": "flare",
    "id" : "flare",
    "children": [
        {
            "name": "analytics",
            "id": "analytics"

        },
        {
            "name": "animate",
            "id": "animate"
        }
    ]
}

并且expand.json

{"children": [
    {
        "name": "x",
        "id": "x",
        "size": 1983
    },
    {
        "name": "y",
        "id": "y",
        "size": 2047
    },
    {
        "name": "z",
        "id": "z",
        "size": 1375
    },
    {
        "name": "t",
        "id": "t",
        "size": 1375
    }
]}

PS：我不得不对节点数组进行排序，否则图中发生了不好的事情，我无法理解为什么。

Answer 1

这里是工作解决方案的fiddle。我认为问题在于你声明你的id并根据数组索引对它们进行排序的方式。你应该让扁平化代码声明id，然后根据给定的id对它们进行排序。同样在您的递归函数中，您可能希望先声明父级，然后再声明子级。

function recurse(node) {
        if(!node.id) node.id = ++i;
        nodes.push(node);
        if (node.children) node.children.forEach(recurse);
    }

Answer 2

我已经设法从Yogesh的答案中找到了解决方案。以下是需要在update（）函数中添加的代码。

            var currentNodes = force.nodes();
            var nodes = flatten(root);
            var actualNodes = [];

            var values = currentNodes.map(function(obj) { return obj.name});
            var newNodesValues = nodes.map(function(obj) { return obj.name });


            for(var i = 0; i < currentNodes.length; i++) {
                if(newNodesValues.indexOf(currentNodes[i].name) !== -1) {
                    actualNodes.push(currentNodes[i]);
                }
            }

            for(var i = 0; i < nodes.length; i++) {
                if(values.indexOf(nodes[i].name) == -1) {
                    actualNodes.push(nodes[i]);
                }
            }

            nodes = actualNodes;

            var links = d3.layout.tree().links(nodes);

            // Restart the force layout.
            force
                    .nodes(nodes)
                    .links(links)
                    .linkDistance(55)
                    .start();

Answer 3

以下应该可以解决问题：

var i = 0;

...

var link = vis.selectAll(".link")
    .data(links, function (d) {
                return d.id || (d.id = ++i);
            });

...

var node = vis.selectAll("g.node")
.data(nodes, function (d) {
                return d.id || (d.id = ++i);
            });

data（）的第二个参数是一个回调函数，当用数据调用时，返回将每个DOM节点绑定到它的相应数据的键。当你没有提供这样的功能时，d3没有选择，只能使用索引将数据绑定到DOM节点。

d3js强制布局使用隐藏/取消隐藏节点点击错误放置节点后的节点

3 个答案: