d3js v4：将节点添加到强制导向图

时间：2016-10-13 10:18:32

标签： javascript d3.js force-layout d3v4

我想在d3js v4 中渲染强制导向图，并为动态添加新节点和链接提供模拟功能。我的第一次尝试（见下文）仍有一些重大问题：

  • 现有的节点和链接似乎被力量忽略了 添加链接后的模拟
  • 模拟节点和链接及其SVG对应物之间的绑定以某种方式不起作用

我想我知道所有示例（例如， [1，2]）都展示了v3的类似功能，但我想用v4来做。

感谢您的帮助！

的index.html 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
        <script type="text/javascript" src="js/d3.js"></script>
        <script type="text/javascript" src="js/graph.js"></script>
        <style type="text/css">
            .links line {
                stroke: #aaa;
            }

            .nodes circle {
              pointer-events: all;
              stroke: none;
              stroke-width: 40px;
            }
        </style>
    </head>
    <body>
        <div class="chart-container" style="max-width: 1000px;"></div>

        <button class="expand">Expand graph</button>

        <script type="text/javascript">
            //sample graph dataset
            var graph = {
                "nodes": [
                    {"id": "A"},
                    {"id": "B"},
                    {"id": "C"},
                    {"id": "D"},
                    {"id": "E"},
                    {"id": "F"}
                ],
                "links": [
                    {"source": "B", "target": "A"},
                    {"source": "C", "target": "A"},
                    {"source": "D", "target": "A"},
                    {"source": "D", "target": "C"},
                    {"source": "E", "target": "A"},
                    {"source": "F", "target": "A"}
                ]
            }
            //graph container
            var targetElement = document.querySelector('.chart-container');

            var graph = new Graph(targetElement, graph);

            d3.selectAll('button.expand').on('click', function (){
                var nodes = [
                    {"id": "G", "group": 1}
                ];

                var links = [
                    {"source": "F", "target": "G", "value": 1}
                ];

                graph.expandGraph(links, nodes);
            });

        </script>
    </body>
</html>

graph.js 

var Graph = function(targetElement, graph) {

    var self = this,

        width = targetElement.offsetWidth,

        height = width / 2,

        svg = d3.select(targetElement).append('svg')
            .attr("width", width)
            .attr("height", height),

        simulation = d3.forceSimulation()
                       .force("link", d3.forceLink().id(function(d) { return d.id; }))
                       .force("charge", d3.forceManyBody())
                       .force("center", d3.forceCenter(width / 2, height / 2)),

        link = svg.append("g")
                  .attr("class", "links")
                  .selectAll("line"),

        node = svg.append("g")
                  .attr("class", "nodes")
                  .selectAll("circle"),

        update = function() {

            // Redefine and restart simulation
            simulation.nodes(graph.nodes)
                      .on("tick", ticked);

            simulation.force("link")
                      .links(graph.links);

            // Update links
            link = link.data(graph.links);

            // Enter links
            link = link.enter().append("line");

            // Exit any old links
            link.exit().remove();

            // Update the nodes
            node = node.data(graph.nodes);

            // Enter any new nodes
            node = node.enter().append("circle")
                       .attr("r", 5)
                       .call(d3.drag()
                            .on("start", dragstarted)
                            .on("drag", dragged)
                            .on("end", dragended));

            // Exit any old nodes
            node.exit().remove();

            function ticked() {
                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("cx", function(d) { return d.x; })
                    .attr("cy", function(d) { return d.y; });
            }


        },

        dragstarted = function(d) {
            if (!d3.event.active) simulation.alphaTarget(0.3).restart();
            d.fx = d.x;
            d.fy = d.y;
        },

        dragged = function(d) {
            d.fx = d3.event.x;
            d.fy = d3.event.y;
        },

        dragended = function(d) {
            if (!d3.event.active) simulation.alphaTarget(0);
            d.fx = null;
            d.fy = null;
        },

        expandGraph = function(links, nodes) {

            for (var i=0; i < nodes.length; i++) {
                console.log('adding node', nodes[i]);
                graph.nodes.push(nodes[i]);
            }

            for (var i=0; i < links.length; i++) {
                console.log('adding link', links[i]);
                graph.links.push(links[i]);
            }

            update();

        };

        // Public functions
        this.expandGraph = expandGraph;

    update();

};

1 个答案:

答案 0 :(得分：8)

您忘记了merge()您的节点。我已快速更新了您的代码：

<强> graph.js 

var Graph = function(targetElement, graph) {

var self = this,

    width = targetElement.offsetWidth,

    height = width / 2,

    svg = d3.select(targetElement).append('svg')
        .attr("width", width)
        .attr("height", height),

    simulation = d3.forceSimulation()
                   .force("link", d3.forceLink().id(function(d) { return d.id; }))
                   .force("charge", d3.forceManyBody())
                   .force("center", d3.forceCenter(width / 2, height / 2)),

    linkGroup = svg.append("g")
              .attr("class", "links"),

    nodeGroup = svg.append("g")
              .attr("class", "nodes"),

    update = function() {

        // Redefine and restart simulation
        simulation.nodes(graph.nodes)
                  .on("tick", ticked);

        simulation.force("link")
                  .links(graph.links);

        // Update links
        link = linkGroup
            .selectAll("line")
            .data(graph.links);

        // Enter links
        linkEnter = link
            .enter().append("line");

        link = linkEnter
            .merge(link);

        // Exit any old links
        link.exit().remove();

        // Update the nodes
        node = nodeGroup.selectAll("circle").data(graph.nodes);

        // Enter any new nodes
        nodeEnter = node.enter().append("circle")
                   .attr("r", 5)
                   .call(d3.drag()
                        .on("start", dragstarted)
                        .on("drag", dragged)
                        .on("end", dragended));

        node = nodeEnter.merge(node);

        // Exit any old nodes
        node.exit().remove();



        function ticked() {
            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("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; });
        }


    },

    dragstarted = function(d) {
        if (!d3.event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
    },

    dragged = function(d) {
        d.fx = d3.event.x;
        d.fy = d3.event.y;
    },

    dragended = function(d) {
        if (!d3.event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
    },

    expandGraph = function(links, nodes) {

        for (var i=0; i < nodes.length; i++) {
            console.log('adding node', nodes[i]);
            graph.nodes.push(nodes[i]);
        }

        for (var i=0; i < links.length; i++) {
            console.log('adding link', links[i]);
            graph.links.push(links[i]);
        }

        update();

    };

    // Public functions
    this.expandGraph = expandGraph;

update();

};

实际上我并不是100％了解这个新功能，但您始终需要将新链接和节点（即linkEnter和nodeEnter）与现有图表合并。如果你不这样做，那么旧的Graph就会死掉......

Mike Bostock在这里举例说明如何使用merge：
https://bl.ocks.org/mbostock/3808218

相关问题
最新问题