Question

我有一个强制启用的SVG可视化，我希望较小的圆圈被吸引到更大的圆圈。这个吸引力的工作原理是计算元素的中心点并在迭代中为可视化中的每个“滴答”进行更改，以防止物品越过节点的中心我使用一个函数来改变项目的费用，这取决于他们的尺寸。

我在这里使用Mike的代码作为基础：http://mbostock.github.io/d3/talk/20110921/#14

我的问题来到这里 - 似乎更大的圈子正在影响彼此的“引力场” - 有没有办法让他们彼此分开？

强制布局设置：

var w = 1280,
    h = 800,
    color = d3.scale.category10();

  var force = d3.layout.force()
    .gravity(0.0)
    .charge(function(d){
      return -10 * d.r;
    })
    .size([w, h]);

元素图：

var g = svg.selectAll("g.node")
    .data(nodes)
    .enter().append("svg:g")
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    })
    ;


  g.append("svg:circle")
    .attr("r", 40)
    .attr("transform", function(d) { return "translate(" + 0 + ","+ 0 + ")"; })
    .style("fill", fill)
    .call(force.drag);

  g.append("svg:text")
    .attr("x", 0)
    .attr("dy", ".31em")
    .attr("text-anchor", "middle")
    .text(function(d) {
      return d.label;
    });

动画循环：

force.on("tick", function(e) {
    var k = e.alpha * 0.5;

    nodes.forEach(function(node) {
      var center = nodes[node.type];

      dx = center.x - node.x;
      dy = center.y - node.y;
      node.x += dx * k;
      node.y += dy * k;

    });

    svg.selectAll(".circle")
      .attr("cx", function(d) {
        return d.x;
      })
      .attr("cy", function(d) {
        return d.y;
      });
  });

添加较小的圈子：

svg.on("mousemove", function() {
    var p1 = d3.svg.mouse(this),
      node = {
        type: Math.random() * 3 | 0,
        x: p1[0],
        y: p1[1],
        r: 1.5,
        px: (p0 || (p0 = p1))[0],
        py: p0[1]
      };

    p0 = p1;

    svg.append("svg:circle")
      .attr("class", "circle")
      .data([node])
      .attr("cx", function(d) {
        return d.x;
      })
      .attr("cy", function(d) {
        return d.y;
      })
      .attr("r", 4.5)
      .style("fill", fill);

    nodes.push(node);
    force.start();
  });

如何在D3中分离不同的“引力场”？

0 个答案: