在缩放d3.js时添加元素

Question

我必须实现缩放功能，该功能将在放大和缩小时添加子节点并删除子节点。

我可以实现它但是在平移或拖动它时再次调用zoom事件正在进行添加和删除子节点。

请检查我的代码，看看我到目前为止所取得的成就。

＆＃13;

＆＃13;

	var graph = {
			    "nodes": [
			    {
			        "x": 30,
			        "y": 30,
			        fixed: true,
			        name: "Start",
			        display: "none",
			        tx: -5,
			        ty: -15
			    },
			    {
			        "x": 300,
			        "y": 30,
			        fixed: true,
			        name: "Module 1"
			    },
			    {
			        "x": 700,
			        "y": 30,
			        fixed: true,
			        name: "Module 2"
			    },
			    {
			        "x": 1000,
			        "y": 30,
			        fixed: true,
			        display: "none",
			        name: ""
			    },
			    {
			        "x": 1000,
			        "y": 200,
			        fixed: true,
			        display: "none",
			        name: ""
			    },
			    {
			        "x": 500,
			        "y": 200,
			        fixed: true,
			        name: "Module 3"
			    },
			    {
			        "x": 60,
			        "y": 200,
			        display: "none",
			        fixed: true,
			        name: ""
			    },
			    {
			        "x": 60,
			        "y": 400,
			        fixed: true,
			        display: "none",
			        name: ""
			    },
			    {
			        "x": 300,
			        "y": 400,
			        fixed: true,
			        name: "Module 4"
			    },
			    {
			        "x": 700,
			        "y": 400,
			        fixed: true,
			        name: "Module 5"
			    },
			    {
			        "x": 1000,
			        "y": 400,
			        fixed: true,
			        display: "none",
			        name: ""
			    },
			    {
			        "x": 1000,
			        "y": 600,
			        fixed: true,
			        display: "none",
			        name: ""
			    },
			    {
			        "x": 500,
			        "y": 600,
			        fixed: true,
			        name: "Module 6"
			    },
			    {
			        "x": 30,
			        "y": 600,
			        fixed: true,
			        name: "END",
			        display: "none",
			        tx: -10,
			        ty: -20
			    }
			     ],
			        "links": [
			        {
			        	"source": 0,
			        	"target": 1
			   		},
			   		{
			        	"source": 1,
			        	"target": 2
			   		},
			   		{
			        	"source": 2,
			        	"target": 3
			   		},
			   		{
			        	"source": 3,
			        	"target": 4
			   		},
			   		{
			        	"source": 4,
			        	"target": 5
			   		} ,
			   		{
			        	"source": 5,
			        	"target": 6
			   		} ,
			   		{
			        	"source": 6,
			        	"target": 7
			   		},
			   		{
			        	"source": 7,
			        	"target": 8
			   		} ,
			   		{
			        	"source": 8,
			        	"target": 9
			   		} ,
			   		{
			        	"source": 9,
			        	"target": 10
			   		} ,
			   		{
			        	"source": 10,
			        	"target": 11
			   		},
			   		{
			        	"source": 11,
			        	"target": 12
			   		},
			   		{
			        	"source": 12,
			        	"target": 13
			   		} ,
			   		{
			        	"source": 13,
			        	"target": 0
			   		}     
			    ]
			}

			var width = 1200,
			    height = 900;

		
			

			var container, zoomscale = 1;
			update(graph);
			function update(graph){


					var force = d3.layout.force()
			    .size([width, height])
			    .on("tick", tick);
			
			var zoom = d3.behavior.zoom()
			    .scaleExtent([1, 4])
			    .on("zoom", zoomed);

			var drag = d3.behavior.drag()
			    .origin(function(d) { return d; })
			    .on("dragstart",function() { d3.event.sourceEvent.stopPropagation(); })
			    .on("drag", dragged)
			    .on("dragend", dragended);

			var svg = d3.select("#zoomModuleView").append("svg")
			    .attr("width", width)
			    .attr("height", height)
			   .call(zoom)
			    .append("g")
			    .attr("transform", "translate(" + 0 + "," + 0 + ")")


			 container = svg.append("g");
			var link = container.selectAll(".link"),
			    node = container.selectAll(".node");
			var gnodes;
			
				force.nodes(graph.nodes)
				    .links(graph.links)
				    .alpha(0.01)
				    .start();

				link = link.data(graph.links)
				    .enter().append("line")
				    .attr("class", "link");

				

				 gnodes = container.selectAll('g.gnode')
				  .data(graph.nodes)
				  .enter()
				  .append('g')
				  .classed('gnode', true)
				  

				node = gnodes.append("rect")
				    .attr("class", "node")
				    .attr('x',function(d){ if (d.tx) {return d.tx} else {return -25}})
				    .attr('y',function(d){ if (d.ty) {return d.ty} else {return -30}})
				    .attr("width", 180)
				    .attr('height',80 )
				    .style("display", function (d) {
					    return d.display;
					})
					.style('fill', '#F2F3F4')

					
				    
				var labels = gnodes.append("text")
				  .attr("x", function(d){ if (d.tx) {return d.tx} else {return 30}})
				  .attr("y", function(d){ if (d.ty) {return d.ty} else {return 35}})
				  .text(function(d) {  
				  	if(d.name !="Start"&&d.name !="END")
				  		return d.name; 
				  });

				var image_node = gnodes.append("svg:image")
				    .attr("class", "node")
				    .attr('x',function(d){ if (d.tx) {return d.tx} else {return 40}})
				    .attr('y',function(d){ if (d.ty) {return d.ty} else {return -15}})
				    .attr("width", 36)
				    .attr('height',36)
				    .attr("xlink:href", function(d) { 
				    	if(d.name !="Start"&&d.name !="END"){
				    		return "D:/Chandan/New%20Proj/Mock%20Up/Book1.png"
				    	}else{
				    		return "D:/Chandan/New%20Proj/Mock%20Up/Book2.png"
				    	}
				    })
				    .style("display", function (d) {
				    	if(d.name !="Start"&&d.name !="END")
					    	return d.display;
					})

					function tick() {
										    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;
										    });

										    gnodes.attr("transform", function(d) { 
										    return 'translate(' + [d.x, d.y] + ')'; 
										  });
										}
			}
			

			
			function zoomed() {
				
				
			  		container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
			  	

	
			}
			function dragstarted(d) {
			
			  d3.event.sourceEvent.stopPropagation();
			  d3.select(this).classed("dragging", true);
			}

			function dragged(d) {
				console.log(d);
			  	
			  d3.select(this).attr("x", d.x = d3.event.x).attr("y", d.y = d3.event.y);
			 
			}

			function dragended(d) {
				console.log(d);
			  d3.select(this).classed("dragging", false);
			}
			$(".link").last().attr("style","stroke-dasharray: 10px")

＆＃13;

.link {
		    stroke: #0FB2EF;
		    stroke-width: 1.5px;
		}
		.node {

		    fill: #FFFFFF;
		    stroke: #E4F4F8;
		    stroke-width: 1.5px;
		}
		text{
			fill: burlywood;
		}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id ="zoomModuleView" style="margin-left: 140px;"></div>

＆＃13;

＆＃13;

＆＃13;