強制定向圖和本地存儲

Question

我試圖在拖放到localStorage之后存儲節點位置，但是當我重新加載頁面時，鏈接是我保存它們的位置，節點也是如此，但是鏈接和節點沒有鏈接，因此節點只是偏離了它們的初始位置。

在這里，我的代碼，我正在使用角度。

angular.module('core').controller('HomeController', ['$scope', 
function($scope) {
    $scope.graph = {
        width : 500,
        height : 400,
        color : d3.scale.category20(),
        force : '',
        drag : '',
        dragstart : function(d) {
            d.x = d3.event.x;
            d.y = d3.event.y;
        },
        dragend : function(d) {
            var graphTmp = { "nodes" : $scope.graph.node.data(), "links" : $scope.graph.link.data()};
            localStorage.setItem('graph',JSON.stringify(graphTmp));
        },
        link : [],
        node : [],
        links : [],
        nodes : []
    };
    $scope.svg = d3.select("body").append("svg")
            .attr("width", $scope.graph.width)
            .attr("height", $scope.graph.height);
    $scope.savedGraph = {};

    $scope.draw = function(){
        $scope.graph.force = d3.layout.force()
                .charge(-120)
                .linkDistance(30)
                .size([$scope.graph.width, $scope.graph.height]);

        $scope.graph.force
              .nodes($scope.graph.nodes)
              .links($scope.graph.links)
              .start();

        $scope.graph.link = $scope.svg.selectAll(".link")
            .data($scope.graph.links)
            .enter().append("line")
            .attr("class", "link")
            .style({'stroke' : 'gray', 'stroke-width' : '1px'});

        $scope.graph.drag = $scope.graph.force.drag()
            .on("dragstart", $scope.graph.dragstart)
            .on("dragend", $scope.graph.dragend);

        $scope.graph.node = $scope.svg.selectAll(".node")
            .data($scope.graph.nodes)
            .enter().append("circle")
            .attr("class", "node")
            .attr("r", 5)
            .style("fill", function(d) { return $scope.graph.color(d.group); })
            .call($scope.graph.drag);

        $scope.graph.node
            .append("title")
            .text(function(d) { return d.name; });

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

            $scope.graph.node
                .attr("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; });
        });
    };

    if(localStorage.getItem('graph') === null){

        $scope.graph.nodes = [
            {"name":"Myriel","group":1},
            {"name":"Napoleon","group":1},
            {"name":"Mlle.Baptistine","group":1},
            {"name":"Mme.Magloire","group":1},
            {"name":"CountessdeLo","group":1},
            {"name":"Geborand","group":1},
            {"name":"Champtercier","group":1},
            {"name":"Cravatte","group":1},
            {"name":"Count","group":1}
        ];

        $scope.graph.links = [
            {"source":1,"target":0,"value":1},
            {"source":2,"target":0,"value":8},
            {"source":3,"target":0,"value":10},
            {"source":3,"target":2,"value":6},
            {"source":4,"target":0,"value":1}
        ];

        $scope.draw();
    }
    else {
        var graphTmp = $.parseJSON(localStorage.getItem('graph'));
        $scope.graph.links = graphTmp.links;
        $scope.graph.nodes = graphTmp.nodes;
        $scope.draw();

    }

有人知道為什么嗎？ 我認為這是因為節點和鏈接無法僅與node.data（）和link.data（）數據鏈接在一起。 我可以存儲更多數據嗎？

謝謝 ！

Answer 1

問題在於，最初加載鏈接時（本地存儲中沒有數據），它具有以下結構：

 $scope.graph.links = [{
            "source": 1,
            "target": 0,
            "value": 1
        }, {
            "source": 2,
            "target": 0,
            "value": 8
        }, {
            "source": 3,
            "target": 0,
            "value": 10
        }, {
            "source": 3,
            "target": 2,
            "value": 6
        }, {
            "source": 4,
            "target": 0,
            "value": 1
        }];

現在，強制布局將用節點中的源對象替換源索引。

拖動時，保存節點和鏈接（鏈接對象將保存源和目標的節點對象）。

現在，當您從本地存儲加載時，您將分析鏈接，鏈接源/目標將具有與節點對象不同的對象（因為其深度克隆）。

因此，節點上的拖動更改將不會反映在鏈接源/目標對象上。因此，鏈接將斷開。

該問題的解決方案是，您始終將鏈接的索引形式存儲在localstorage中。 我在這里通過保持另一個對象initLinks來執行此操作

$scope.graph.nodes = [{
    "name": "Myriel",
    "group": 1
}, {
    "name": "Napoleon",
    "group": 1
}, {
    "name": "Mlle.Baptistine",
    "group": 1
}, {
    "name": "Mme.Magloire",
    "group": 1
}, {
    "name": "CountessdeLo",
    "group": 1
}, {
    "name": "Geborand",
    "group": 1
}, {
    "name": "Champtercier",
    "group": 1
}, {
    "name": "Cravatte",
    "group": 1
}, {
    "name": "Count",
    "group": 1
}];

$scope.graph.links = [{
    "source": 1,
    "target": 0,
    "value": 1
}, {
    "source": 2,
    "target": 0,
    "value": 8
}, {
    "source": 3,
    "target": 0,
    "value": 10
}, {
    "source": 3,
    "target": 2,
    "value": 6
}, {
    "source": 4,
    "target": 0,
    "value": 1
}];
$scope.graph.initLinks = angular.copy($scope.graph.links);

在保存到本地存儲時，我這樣做

    var graphTmp = {
        "nodes": $scope.graph.nodes,
        "links": $scope.graph.initLinks
    };

    localStorage.setItem('graph', JSON.stringify(graphTmp));

從本地存儲加載時，我這樣做

var graphTmp = JSON.parse(localStorage.getItem('graph'));
$scope.graph.links =  graphTmp.links;
$scope.graph.initLinks = angular.copy(graphTmp.links);
$scope.graph.nodes = graphTmp.nodes;
$scope.draw();

這里的工作代碼

希望這可以幫助！

Answer 2

如果鏈接中包含復雜數據，則可擴展cyrils答案。 您可能想要用其索引替換對象引用本身。 所有其他數據都將保留。 請注意，在我的應用程序中，我將鏈接數據分別保存在localstorage 。 節點用另一個密鑰保存。

store(key: string, data: any) {
if (key === 'links') {
  // replace all targets and source with indexes, we do not need to serialize the values.
  localStorage.setItem(key, JSON.stringify(data, (k, v) => {
    if (k === 'source' || k === 'target') {
      return v.index;
    } else {
      return v;
    }

  }));

} else {
  localStorage.setItem(key, JSON.stringify(data));
}
}