javascript - D3 Cluster Force add group-nested circle -


i trying add group-nested circle clusters on mouse click event, to obtain html markup this.

but newly added circles go on top of existent ones , initial cluster gravity lost. want newly added elements behave same way initial ones. have tried modify logic on function mousedown() not obtained desired behavior. guidance highly appreciated.

here current code:

    var width = window.innerwidth,              height = window.innerheight,              padding = 1.5,      // separation between same-color circles              clusterpadding = 6, // separation between different-color circles              maxradius = 60,              minradius = 20;        var n = 3, // intitotal number of circles          m = 2; // number of distinct clusters        var color = d3.scale.category10()          .domain(d3.range(m));        // largest node each cluster.      var clusters = new array(m);         // data circles      var nodes = d3.range(n).map(function () {          var = math.floor(math.random() * m),              r = math.sqrt((i + 1) / m * -math.log(math.random())) * maxradius,              nodeid = r.tostring(),              d = { cluster: i, radius: r, nodeid:nodeid};          if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d;          return d;      });        var force = d3.layout.force()          .nodes(nodes)          .size([width, height])          .gravity(.02)          .charge(0)          .on("tick", tick)          .start();        var svg = d3.select("body").append("svg")          .attr("width", width)          .attr("height", height)          .on("mousedown", mousedown);        var group = svg.selectall("g")          .data(nodes)          .enter().append("g")                  .attr("class", "node")          .call(force.drag);        var circle = group.append("circle")          .attr("r", function (d) { return d.radius; })          .attr("fill", function (d) { return color(d.cluster); });        function mousedown() {            var = math.floor(math.random() * m),          r = math.sqrt((i + 1) / m * -math.log(math.random())) * maxradius,          nodeid = r.tostring(),          d = { cluster: i, radius: r, nodeid: nodeid};          if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d;          nodes.push(d);                    group = svg.selectall("g")              .data(nodes)              .enter().append("g")              .attr("class", "node")              .call(force.drag);            circle = group.append("circle")              .attr("r", function (d) { return d.radius; })          	.attr("fill", function (d) { return color(d.cluster); });            force.start();      };        function tick(e) {          circle              .each(cluster(10 * e.alpha * e.alpha))              .each(collide(.5))              .attr("cx", function (d) { return d.x; })              .attr("cy", function (d) { return d.y; });      }        // move d adjacent cluster node.      function cluster(alpha) {          return function (d) {              var cluster = clusters[d.cluster];              if (cluster === d) return;              var x = d.x - cluster.x,                  y = d.y - cluster.y,                  l = math.sqrt(x * x + y * y),                  r = d.radius + cluster.radius;              if (l != r) {                  l = (l - r) / l * alpha;                  d.x -= x *= l;                  d.y -= y *= l;                  cluster.x += x;                  cluster.y += y;              }          };      }        // resolves collisions between d , other circles.      function collide(alpha) {          var quadtree = d3.geom.quadtree(nodes);          return function (d) {              var r = d.radius + maxradius + math.max(padding, clusterpadding),                  nx1 = d.x - r,                  nx2 = d.x + r,                  ny1 = d.y - r,                  ny2 = d.y + r;              quadtree.visit(function (quad, x1, y1, x2, y2) {                  if (quad.point && (quad.point !== d)) {                      var x = d.x - quad.point.x,                          y = d.y - quad.point.y,                          l = math.sqrt(x * x + y * y),                          r = d.radius + quad.point.radius + (d.cluster === quad.point.cluster ? padding : clusterpadding);                      if (l < r) {                          l = (l - r) / l * alpha;                          d.x -= x *= l;                          d.y -= y *= l;                          quad.point.x += x;                          quad.point.y += y;                      }                  }                  return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;              });          };      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


Comments

Post a Comment

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

i using winscp .net assembly uploading files. want upload multiple files asynchronous way. have created method works single upload. public class uploadingdata { private sessionoptions _sessionoptions; private session _session; //connection etc private void onconnected() { foreach (var fileinfo in localfileslist) { var task = task.factory.startnew(() => uploadfilesasync(fileinfo)); } } private async task uploadfilesasync(string file) { string remotefilepath = _session.translatelocalpathtoremote(file, @"/", "/test_data_upload"); var uploading = _session.putfiles(file, remotefilepath, false); //when done await task.run(() => thread.sleep(1000)); } } please suggest me correct way. thanks you can use backgroundworker class this: string[] images = new string[50]; foreach (var path in images) { backgroundworker
Read more

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more