好吧，我可以找到浏览解决方案的方法，并将其发布在此处，以供需要此主题的任何人使用。这个想法是创建图的对象，并处理节点和链接数组。JS代码如下：
var graph;function myGraph(el) {// Add and remove elements on the graph objectthis.addNode = function (id) { nodes.push({"id":id}); update();};this.removeNode = function (id) { var i = 0; var n = findNode(id); while (i < links.length) { if ((links[i]['source'] == n)||(links[i]['target'] == n)) { links.splice(i,1); } else i++; } nodes.splice(findNodeIndex(id),1); update();};this.removelink = function (source,target){ for(var i=0;i<links.length;i++) { if(links[i].source.id == source && links[i].target.id == target) { links.splice(i,1); break; } } update();};this.removealllinks = function(){ links.splice(0,links.length); update();};this.removeAllNodes = function(){ nodes.splice(0,links.length); update();};this.addlink = function (source, target, value) { links.push({"source":findNode(source),"target":findNode(target),"value":value}); update();};var findNode = function(id) { for (var i in nodes) { if (nodes[i]["id"] === id) return nodes[i];};};var findNodeIndex = function(id) { for (var i=0;i<nodes.length;i++) { if (nodes[i].id==id){ return i; } };};// set up the D3 visualisation in the specified elementvar w = 500, h = 500;var vis = d3.select("#svgdiv") .append("svg:svg") .attr("width", w) .attr("height", h) .attr("id","svg") .attr("pointer-events", "all") .attr("viewBox","0 0 "+w+" "+h) .attr("perserveAspectRatio","xMinYMid") .append('svg:g');var force = d3.layout.force();var nodes = force.nodes(), links = force.links();var update = function () { var link = vis.selectAll("line") .data(links, function(d) { return d.source.id + "-" + d.target.id; }); link.enter().append("line") .attr("id",function(d){return d.source.id + "-" + d.target.id;}) .attr("class","link"); link.append("title") .text(function(d){ return d.value; }); link.exit().remove(); var node = vis.selectAll("g.node") .data(nodes, function(d) { return d.id;}); var nodeEnter = node.enter().append("g") .attr("class", "node") .call(force.drag); nodeEnter.append("svg:circle") .attr("r", 16) .attr("id",function(d) { return "Node;"+d.id;}) .attr("class","nodeStrokeClass"); nodeEnter.append("svg:text") .attr("class","textClass") .text( function(d){return d.id;}) ; node.exit().remove(); force.on("tick", function() { node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 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; }); }); // Restart the force layout. force .gravity(.05) .distance(50) .linkDistance( 50 ) .size([w, h]) .start();};// Make it all goupdate();}function drawGraph(){graph = new myGraph("#svgdiv");graph.addNode('A');graph.addNode('B');graph.addNode('C');graph.addlink('A','B','10');graph.addlink('A','C','8');graph.addlink('B','C','15');}
