Javascript D3力导向布局+；将所有节点恢复到原始位置_Javascript_D3.js

Javascript D3力导向布局+；将所有节点恢复到原始位置

javascript d3.js

Javascript D3力导向布局+；将所有节点恢复到原始位置,javascript,d3.js,Javascript,D3.js,我已经创建了一些基本节点和链接来创建一个具有D3的力定向图。我已经在我的拖动函数上设置了一些基本逻辑，这样当一个节点被拖动时，它会返回到其原始的起始位置。在我把它们连接在一起之前，这一切都很顺利。如何使链中的所有节点在拖动后返回到其原始位置 <!DOCTYPE html> <meta charset="utf-8"> <style> .Properties{ fill: yellow; stroke: black;

我已经创建了一些基本节点和链接来创建一个具有D3的力定向图。我已经在我的拖动函数上设置了一些基本逻辑，这样当一个节点被拖动时，它会返回到其原始的起始位置。在我把它们连接在一起之前，这一切都很顺利。如何使链中的所有节点在拖动后返回到其原始位置

<!DOCTYPE html>
<meta charset="utf-8">
<style>

    .Properties{
        fill: yellow;
        stroke: black;
        stroke-width: 2px;
    }
    .link {
    stroke: #777;
    stroke-width: 2px;
    }


</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
        //Most of these variables are just used to calculate original position
        var width = 960, height = 500, colors = d3.scale.category10();
        var svg = null, force = null;
        var circle = null, path = null;
        var nodes = null, links = null;
        var nodesArray = null, linkArray = null;
        var count = 0;
        var element = "body"; var numEdges = 4, numNodes = 5;
        var i = 0; var L = 16, r = 12, lineLimit = 10;
        var d = 2 * r + L;
        var R = (count - 1) * d;
        var m = width / 2;
        var X;

        svg = d3.selectAll(element).append('svg').attr('width', width).attr('height', height);

        //Load nodes and links original positions
        nodes = d3.range(numNodes).map(function () {
            X = m - (R / 2) + (i * d);
            ++i;
            return {
                x: X,
                y: (height) / 3,
                fx: X,
                fy: height / 3,
                id: i-1,
                reflexive: true,
                r: 12
            };           
        });
        for (var i = 0; i < numNodes; ++i) {
            d3.select(element).append("h3").text("Node " + i + ": " + nodes[i].id);
        }

        i = -1;
        links = d3.range(numEdges).map(function () {
            i++;
            return {
                //
                source: nodes[i],
                target: nodes[i+1],
                left: false,
                right: true
            }
        });
        for (var i = 0; i < numEdges; ++i) {
            d3.select(element).append("h3").text("Source: " + links[i].source.id + " Target: " + links[i].target.id);
        }

        force = d3.layout.force().size([width, height]).nodes(nodes).links(links).linkDistance(40).linkStrength(0.1).charge(-300);
        var drag = force.drag()
                    .on('dragstart', dragstart)
                    .on('drag', drag)
                    .on('dragend', dragend);
        linkArray = svg.selectAll('.link').data(links).enter().append('line').attr('class', 'link')
            .attr('x1', function (d) {
                return nodes[d.source.id].x;
            })
            .attr('y1', function (d) { return nodes[d.source.id].y; })
            .attr('x2', function (d) { return nodes[d.target.id].x; })
            .attr('y2', function (d) { return nodes[d.target.id].y; });


        var circleGroup = svg.selectAll("g").data(nodes);
        var groupEnter = circleGroup.enter().append("g").attr("transform", function(d){return "translate("+[d.x,d.y]+")";}).call(drag);
        var circle = groupEnter.append("circle").attr("cx", 0).attr("cy", -4).attr("r", function(d){return d.r;}).attr("class", "Properties");
        var label = circleGroup.append("text").text(function(d){return d.id;}).attr({"alignment-baseline": "middle", "text-anchor": "middle" }).attr("class", "id");    


        force.on('tick', tick);
        force.start();
        var originalPosition = [];
        function dragstart(d) {
            originalPosition[0] = d.x;
            originalPosition[1] = d.y;
            console.log("Start: ", originalPosition[0], originalPosition[1]);
        }
        function drag() {
            var m = d3.mouse(this);
            d3.select(this)
                    .attr('cx', m[0])
                    .attr('cy', m[1]);
        }

        function dragend(d) {
            console.log("End: ", d.x, d.y);
            d3.select(this).transition().attr('cx', originalPosition[0]).attr('cy', originalPosition[1]);
        }

        function tick() {

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

            linkArray
                .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; });

        }

</script>


.物业{
填充物：黄色；
笔画：黑色；
笔画宽度：2px；
}
.链接{
行程：777；
笔画宽度：2px；
}
//这些变量中的大多数只是用来计算原始位置
变量宽度=960，高度=500，颜色=d3.scale.category10（）；
var svg=null，force=null；
变量圆=null，路径=null；
var节点=null，links=null；
var nodesArray=null，linkArray=null；
var计数=0；
var element=“body”；var numEdges=4，numNodes=5；
var i=0；var L=16，r=12，lineLimit=10；
变量d=2*r+L；
var R=（计数-1）*d；
var m=宽度/2；
var X；
svg=d3.selectAll（element）.append（'svg'）.attr（'width'，width）.attr（'height'，height）；
//加载节点和链接的原始位置
nodes=d3.range（numNodes）.map（函数（）{
X=m-（R/2）+（i*d）；
++一,；
返回{
x:x，
y：（身高）/3，
外汇：X，
fy：高度/3，
id:i-1，
反身：对，
r:12
};           
});
对于（var i=0；i

我在拖动开始时做了类似的操作，保留了原始图形数据的克隆，如下所示：

function dragstart(d) {
    clone1 = JSON.parse(JSON.stringify(graph));
}

function dragend(d) {
    clone1.nodes.forEach(function(n,i){
        graph.nodes[i].px=n.px
        graph.nodes[i].py=n.py
        graph.nodes[i].x=n.x
        graph.nodes[i].y=n.y
    });
 }

在拖动结束时，我将存储的克隆x/y/px/py属性复制回图形节点，使其返回到原来的位置，如下所示：

function dragstart(d) {
    clone1 = JSON.parse(JSON.stringify(graph));
}

function dragend(d) {
    clone1.nodes.forEach(function(n,i){
        graph.nodes[i].px=n.px
        graph.nodes[i].py=n.py
        graph.nodes[i].x=n.x
        graph.nodes[i].y=n.y
    });
 }

工作代码