将新的json数据合并到d3.js和cola.js中的现有图形中

Question

我有一个函数buildTree，它接受json数据作为输入，并使用带有cola.js的d3.js来可视化它们。其想法是，我单击一个按钮并向d3添加一个json。然后，通过单击另一个按钮，我添加了另一个js并保留了旧的，因此我最终得到了两棵树。在我的示例中，我有一个在两个json文件中都存在的节点，所以我希望最后连接这两个树，并且该节点出现一次。

我设法获得了现有的树，添加了新的树，删除了存在两次的节点，并更新了链接，但其中一个链接从未连接到共存的节点。

json文件的格式如下：

{
"nodes":[
  {"id":"a","name":"a","type":"tool","width":60,"height":40},
  {"id":"b","name":"b","type":"tool","width":60,"height":40},
  {"id":"c","name":"c","type":"tool","width":60,"height":40}

],
"links":[
  {"source":0,"target":1},
  {"source":0,"target":2}
],
"groups":[

]

}

第二个是：

{
 "nodes":[
  {"id":"h","name":"h","type":"tool","width":60,"height":40},
  {"id":"i","name":"i","type":"tool","width":60,"height":40},
  {"id":"c","name":"c","type":"tool","width":60,"height":40}

],
"links":[
  {"source":0,"target":1},
  {"source":0,"target":2}

],
"groups":[

]

}

所以c是一个在两个json文件中都存在的节点，应该只在树中出现一次，但有两个链接。

buildTree是这样的：

function buildTree(jsonSource){
d3.json(jsonSource, function (error, graph) {

//get existing data if any and merge them with new data
    myNodes = svg.selectAll(".node");
    myLinks = svg.selectAll(".link");

//update the existing nodes with the new ones, remove duplications and store them in removedNodes
    allNodes = graph.nodes.concat(myNodes.data());
    var uniqueIds=[];
    var allNodesUnique=[];
    var removedNodes=[];
    for (var i=0; i < allNodes.length; i++){
            var id = allNodes[i].id;
            if(uniqueIds.indexOf(id) == -1){
                uniqueIds.push(id);
                allNodesUnique.push(allNodes[i]);
            }else{
                removedNodes.push(allNodes[i]);
            }
    }
    allNodes=allNodesUnique;

    //update links                  
    allLinks = graph.links.concat(myLinks.data()); 

d3.selectAll("svg > *").remove();


    cola
        .nodes(allNodes)
        .links(allLinks)
        .groups(graph.groups)
        .start();

        ...

Answer 1

最后，我通过正确更新链接解决了这个问题，javascript代码可以在这里找到：

​

<script src="d3v4.js"></script>
<script src="cola.min.js"></script>
<script>
	
//function on button click		
function myFunction() {
	buildTree("Data1.json");
	document.getElementById('graph').style.visibility="visible";
   
}

//function on button click	
function myFunction2() { 
  buildTree("Data2.json");
  document.getElementById('graph').style.visibility="visible";

   
}

<!-- initialize cola -->
  var width = 960,
      height = 500; //these are the dimensions of the graph

	// map colors for nodes to their type	
	var color = d3.scaleOrdinal()
				.domain(["workflow", "tool", "task", "exposed variable"])
				.range(["#009933", "#E3a322", "#E05B2B", "#81D42F"]);

    var cola = cola.d3adaptor(d3)
        .linkDistance(100)
        .avoidOverlaps(true)
        .handleDisconnected(false)
        .size([width, height]);

    var svg = d3.select("#graph").append("svg")
        .attr("width", width)
        .attr("height", height);

<!-- end of initialize cola -->	




/**
This function takes as an iput a json with nodes and links and creates a tree.
If another tree already exists it merges the json data and redraws old trees and new ones

**/
function buildTree(jsonSource){
		var myNodes =[];
		var myLinks=[];
		var allNodes=[];
		var allLinks=[];
		
		

  d3.json(jsonSource, function (error, graph) {
	//console.log(error);

	<!-- Data Merging -->
	//get existing data if any and merge them with new data
	myNodes = svg.selectAll(".node").data();
	myLinks = svg.selectAll(".link").data();	
		
		
	//update the existing NODES with the new ones, remove duplications and store them in removedNodes
		allNodes = graph.nodes.concat(myNodes);
		var uniqueIds=[];
		var allNodesUnique=[];
		var removedNodes=[];
		var oldIds=[];
		
		for (var i=0; i < allNodes.length; i++){
				var currentId = allNodes[i].id;
				if(uniqueIds.indexOf(currentId) == -1){
					uniqueIds.push(currentId);
					allNodesUnique.push(allNodes[i]);
				}else{
					oldIds.push(currentId);
					removedNodes.push(allNodes[i]);
				}
    	}
		allNodes=allNodesUnique;

		var remainedNodes=[];
		for (var j=0; j < oldIds.length; j++){
			for (var i=0; i < allNodes.length; i++){
				if(oldIds[j]!='undefined' && oldIds[j]==allNodes[i].id){
				remainedNode = allNodes[i];
				remainedNodes.push(allNodes[i]);
				}
			}
		}
		
					
		//update LINKS (remove dublications)		
		var myCount = (myNodes.length);
		   if(myCount>-1){
			for (var j=0; j < remainedNodes.length; j++){
				for (var i=0; i < myLinks.length; i++){
					  if(myLinks[i].source.id == remainedNodes[j].id){	  
						myLinks[i].source = remainedNodes[j];		  
					  }
					
					if(myLinks[i].target.id == remainedNodes[j].id){		  
						myLinks[i].target = remainedNodes[j];
					  
					  }
					
							myLinks[i].source.index=myLinks[i].source.index+myCount;
							myLinks[i].target.index=myLinks[i].target.index+myCount;
					}
				}			
			}
			
	    allLinks = graph.links.concat(myLinks); 
		//update removed info
		

		//search for the removed node 
		tempLinks=[];
		for(var j=0; j<removedNodes.length; j++){
			for (var i=0; i < allLinks.length; i++){
				if(allLinks[i].source.id==removedNodes[j].id){		
					allLinks[i].source.index = allLinks[i].source.index - myCount 
				}
				if(allLinks[i].target.id==removedNodes[j].id){
					allLinks[i].target.index = allLinks[i].target.index - myCount 				
				}
			}
		
		}

	<!-- End of Data Merging -->


d3.selectAll("svg > *").remove();


        cola
            .nodes(allNodes)
            .links(allLinks)
            .groups(graph.groups)
            .start();

        var group = svg.selectAll(".group")
            .data(graph.groups)
            .enter().append("rect")
            .attr("rx", 8).attr("ry", 8)
            .attr("class", "group")
            .style("fill", function (d, i) { return color(i);})
            .call(cola.drag);

        var link = svg.selectAll(".link")
            .data(allLinks)
            .enter().append("line")
            .attr("class", function(d){ return ["link", d.source.name, d.target.name].join(" "); });
			
	


        var pad = 3;
        var node = svg.selectAll(".node")
            .data(allNodes)
            .enter().append("rect")
            .attr("class", "node")
            .attr("width", function (d) { return d.width - 2 * pad; })
            .attr("height", function (d) { return d.height - 2 * pad; })
            .attr("rx", 5).attr("ry", 5)
			.style("fill", function(d) {  return color(d.type);   }) //color based on type
            .call(cola.drag);

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

			
        cola.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("x", function (d) { return d.x - d.width / 2 + pad; })
                .attr("y", function (d) { return d.y - d.height / 2 + pad; });
            
            group.attr("x", function (d) { return d.bounds.x; })
                 .attr("y", function (d) { return d.bounds.y; })
                .attr("width", function (d) { return d.bounds.width(); })
                .attr("height", function (d) { return d.bounds.height(); });

			
        });
		
		
		
    });
	
}
	
</script>

​

Answer 2

我认为您的问题是，您传递的链接引用了它们所在的数组中节点的索引。当您将这些节点合并到一个数组中时，索引现在不再匹配。您必须将旧索引从新数据映射到这些节点现在在节点数组中的位置。

另外，我建议您使用Map数据结构来删除重复项。也就是说，你遍历你的节点，把它们都放在一个按ie映射中。然后浏览地图并提取现在复制的空闲列表

例如(请原谅我可能犯下的任何愚蠢的错误)

// map indexes of nodes to their IDs 
const indexIDMap = graph.links.map(d=>d.id);

// remove duplicates
const nodeMap = new Map();
// add old nodes to map
myNodes.data().forEach(d=> nodeMap.set(d.id, d));
//note this would over write any data contained in the new node that isn't on the old node
myNodes.links.forEach(d=> nodeMap.set(d.id, d)); 
// Maps maintain insertion order which is important
const allNodes = [...myNodes.values()]

// links
const newIndices = indexIdMap.map(id => allNodes.findIndex(d => d.id === id))
const newLinks = graph.links.map(l => ({
    source: newIndices[l.source],
    target: newIndices[l.target]
}))

const allLinks = myLinks.data().concat(newLinks)