Question

早上好！

我在D3.js的气泡图上工作，我非常接近我所需要的，但是在更新数据（更改集）时我遇到了行为问题。我希望气泡保持原位，更新尺寸和位置，而不会因为切割而产生弹性效应：（

    function convertData(m){
    var nodes = m;
    nodes.forEach(function(d) {
        clusters[d.cluster] = d;
        d.radius = Math.ceil(Math.sqrt(d.pop/Math.PI))*10;
    });
    return nodes;

}

function updateAnnee(annee){
    nodes = convertData(annee);

    var svg = d3.select("svg")
    var node = svg.selectAll("circle")
    .data(nodes)

         node.transition()
            .duration(0)
            .attr('r', function(d){ return d.radius});
        node
        .enter().append("circle")

        node
        .exit().remove();

  var force = d3.layout.force()
    .nodes(nodes)
    .size([width, height])
    .gravity(.02)
    .charge(0)
    .on("tick", tick)
    .start();

function tick(e) {
      node
      .each(cluster(10 * e.alpha * e.alpha))
      .each(collide(.5))
          .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y-50; })
    }



    // Move d to be adjacent to the 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 and all 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;
    });
      };
    }


}

到目前为止我可以在这里查看：https://jsfiddle.net/hf998do7/1/

这是基于博斯托克先生http://bl.ocks.org/mbostock/7881887

的工作

由于

更新聚集力布局D3气泡图中的数据

0 个答案: