Edit Question - KnowledgeHub

Title Body

I am new to D3 and working on a force directed graph where the json data is dynamic. I am able to change the force graph upon receiving new data but that happens with a springing effect. The code that creates my force graph is : <div class="graph"></div> <script> var w = 660, h = 700, r = 10; var vis = d3.select(".graph") .append("svg:svg") .attr("width", w) .attr("height", h) .attr("pointer-events", "all") .append('svg:g') .call(d3.behavior.zoom().on("zoom", redraw)) .append('svg:g'); vis.append('svg:rect') .attr('width', w) .attr('height', h) .attr('fill', 'rgba(1,1,1,0)'); function redraw() { console.log("here", d3.event.translate, d3.event.scale); vis.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); }; var force = d3.layout.force() .gravity(.05) .charge(-200) .linkDistance( 260 ) .size([w, h]); var svg = d3.select(".text") .append("svg") .attr("width", w) .attr("height", h); d3.json(graph, function(json) { var nodeList = json.nodes; var link = vis.selectAll("line") .data(json.links) .enter() .append("line") .attr("stroke-opacity", function(d) { if(d.label == 'is a') { return '0.8'; } else { return '0.2'; }; }) .attr("stroke-width", function(d) { if(d.value !== null) { return d.value; } else { return 2; }; }) .style("stroke", function(d) { if(d.color !== null) { return d.color; }; }) .on("mouseover", function() { d3.select(this) .style("stroke", "#999999") .attr("stroke-opacity", "1.0"); }) .on("mouseout", function() { d3.select(this)

Tags (comma-separated) Cancel