javascript - force directed d3 zoom and pan works only on link paths excluding the nodes -

javascript - force directed d3 zoom and pan works only on link paths excluding the nodes -

i tried apply zoom , pan forcefulness directed layout graph works on links, nodes doesn't go links , seems floating everytime zoom , pan.

var width = 960, height = 500, root; var forcefulness = d3.layout.force() .linkdistance(90) .charge(-1000) .gravity(.100) .size([width, height]) .on("tick", tick); function zoom() { console.log("here", d3.event.translate, d3.event.scale); console.log("transform", d3.event.translate, d3.event.scale); //vis.attr("transform", transform); node.attr("transform", transform); link.attr("transform", transform); } function transform(d) { homecoming "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"; } var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .call(d3.behavior.zoom().on("zoom", zoom)); var link = svg.selectall(".link"), node = svg.selectall(".node"); var div = d3.select("body") .append("div") // declare tooltip div .attr("class", "tooltip") .style("opacity", 0); svg.style("cursor", "move"); function readfile(json) { root = json; update(); }; function update() { var nodes = flatten(root), links = d3.layout.tree().links(nodes); // restart forcefulness layout. force.nodes(nodes) .links(links) .start(); // update links. link = link.data(links, function (d) { homecoming d.target.id; }); link.exit().remove(); link.enter().insert("line", ".node") .attr("class", "link") .style("stroke", function (d) { homecoming d.target.level; }); // update nodes. node = node.data(nodes, function (d) { homecoming d.id; }); node.exit().remove(); var nodeenter = node.enter().append("g") .attr("class", "node") .on("click", click) .call(force.drag); var defs = node.append("defs").attr("id", "imgdefs"); var imgpattern = defs.append("pattern") .attr("id", "imgpattern") .attr("height", 30) .attr("width", 30) .attr("x", "0") .attr("y", "0"); imgpattern.append("image") .attr("height", 30) .attr("width", 30) .attr("xlink:href", function (d) { homecoming d.image; }); node.select("circle") .style("fill", "url(#imgpattern)"); nodeenter.append("circle") .attr("r", 15) .style("stroke", color) .style("stroke-width", 4) .style("fill", "url(#imgpattern)") .on("mouseover", function (d) { circlepos = this.getboundingclientrect(); div.transition() .duration(500) .style("opacity", 1) .style("cursor", "pointer") .style("left", (circlepos.left + circlepos.width + window.scrollx) + 'px') .style("top", (circlepos.top + window.scrolly) + 'px') .style("position", "absolute") div.html( "<div style='position: absolute; border:2px solid red; background-color: yellow; z-index=-1'>" + "<div class='container'>" + "<div id='wrap'>" + "<div class='col-md-3'>" + "<div class='g-hover-card'>" + "<div class='user-avatar'>" + "<img src='" + d.image + "' alt='' style='margin-top:50px;'/>" + "</div>" + "<div class='info'>" + "<div class='description'>" + "<font size='5px' color='black'>" + d.name + "</font>" + "</div>" + "</div>" + "<div class='bottom'>" + "<br/>" + "<a id='thislink' onclick=\"window.open('http://facebook.com/" + d.pid + "');\" >" + "follow on facebook" + "</a>" + "</div>" + "</div>" + "</div>" + "</div>" + "</div>" + "</div>") $('#thislink').click(function (e) { window.location = "<?php echo base_url();?>index.php/iconnect/generate_tree"; window.location.reload(); }); }) .on("mouseout", function (d) { div.transition() .duration(500) .style("opacity", 0) .each('end', function (d) { d3.select(this).html(""); }); }); div.on("mouseover", function (d) { d3.select(this).transition() .duration(500) .style("opacity", .9); }) .on("mouseout", function (d) { d3.select(this).transition() .duration(500) .style("opacity", 0) .each('end', function (d) { d3.select(this).html(""); }); }); nodeenter.append("text") .attr("dy", ".35em") .text(function (d) { homecoming d.name; }); } function tick() { link.attr("x1", function (d) { homecoming d.source.x; }) .attr("y1", function (d) { homecoming d.source.y; }) .attr("x2", function (d) { homecoming d.target.x; }) .attr("y2", function (d) { homecoming d.target.y; }); node.attr("transform", function (d) { homecoming "translate(" + d.x + "," + d.y + ")"; }); } function color(d) { homecoming d._children ? "#800000" // collapsed bundle : d.children ? "#008000" // expanded bundle : d.parentnode ? "#000000" : "#68228b"; // leaf node } // toggle children on click function click(d) { if (d3.event.defaultprevented) return; // ignore drag if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } update(); } // returns list of nodes under root. function flatten(root) { var nodes = [], = 0; function recurse(node) { if (node.children) node.children.foreach(recurse); if (!node.id) node.id = ++i; nodes.push(node); } recurse(root); homecoming nodes; }

here's jsfiddle sample of have far done.

how can implement graph zooming , panning nodes go link paths?

and possible nodes stick default have seen sample wherein nodes stick when dragged; because json info i'm using dynamic if there huge info graph seems kinda messy because moving.

javascript d3.js