SOURCE

console 命令行工具 X clear

                    
>
console
 var width = 500;
    var height = 500;

    var nodes = [{
        value: "66666666",
        type: "home",
        index: "0"
    },
        {
            value: "11111111111",
            type: "phone",
            index: "1"
        },
        {
            value: "22222222222",
            type: "phone",
            index: "2"
        },
    ];
    var links = [{
        source: 0,
        target: 1
    },
        {
            source: 0,
            target: 2
        }];
    var newNode = {
        value: "666",
        type: "iphone",
        index: 3
    };
    var svg = d3.select('#svg')
        .attr('width', width)
        .attr('height', height);

    var force = d3.layout.force()
        .nodes(nodes)
        .links(links)
        .size([width, height])
        .linkDistance(100)
        .charge([ - 12250])
        .gravity(0.5)
        .friction(0.5);

    force.start();

    var mapG = svg.append('g');
    var linkG = mapG.selectAll(".link")
        .data(links)
        .enter()
        .append("line")
        .attr("class", "link")
        .attr("stroke", "#ccc");
    var nodeG = mapG.selectAll(".node")
        .data(nodes)
        .enter()
        .append("circle")
        .attr("class", "node")
        .attr("r", 8)
        .attr("fill", 'red')
        .call(force.drag);

    force.on("tick", function() {
        linkG.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;
            });

        nodeG.attr("cx", function(d) {
            return d.x
        })
            .attr("cy", function(d) {
                return d.y
            });
    });

    function addNode() {
        nodes.push(newNode);
        links.push({
            source: 0,
            target: newNode.index
        });
        force.stop();
        force.nodes(nodes).links(links);
        force.start();
        updateView();
    }

    function updateView() {

        nodeG = nodeG.data(nodes, function(d) {
            return d.index
        });
       nodeG
            .enter()
            .append("circle")
            .attr("class", "node")
            .attr("r", 8)
            .attr("fill", 'red')
            .call(force.drag);

        nodeG.exit().remove();
        linkG = linkG.data(links, function(d) {
            return d.source.index + d.target.index
        })
        linkG
            .enter()
            .append("line")
            .attr("class", "link")
            .attr("stroke", "#ccc");
         linkG.exit().remove();
      	$('button').remove();
    }
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<svg id="svg">
</svg>
<button onClick="addNode()">
    addNode
</button>