0

我想用力（）和碰撞沿着一个圆圈散布带有内容的方块，所以这些方块不会相互重叠和主圆。任何想法如何做到这一点？我应该使用链接来做到这一点吗？这是一个小提琴http://jsfiddle.net/benderlio/usbq839m/3/ 有时它可以很好地传播方块，但大多数时候方块会像img一样移动。

在此处输入图像描述

    var force = d3.forceSimulation(nodes)
      .force("charge", d3.forceManyBody(1130))
     // .force('link', d3.forceLink().links(links))
      .on("tick", function () {

        var k = this.alpha(),
          kg = k * .02,
          spaceAround = 0.04;

        //console.log('', nodes);

        nodes.forEach(function (a, i) {
                       ...
        });

        svg.selectAll("rect")
          .style("fill", function (d) {
            return "#ccc"
          })
          .attr("x", function (d) {
            return d.x - d.width / 2;
          })
          .attr("y", function (d) {
            return d.y - d.height / 2;
          });

        svg.selectAll("line")
          .attr("x2", function (d) {
            return d.x;
          })
          .attr("y2", function (d) {
            return d.y;
          })

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

      });

谢谢。

升级版：

添加了一个主要的固定方块，现在看起来更好了。但看起来我必须对“碰撞顺序”做一些事情。方块翻转了。任何想法如何解决它？ 在此处输入图像描述

4

2 回答 2

2

我不知道解决这个问题的一般方法，但这里有一些临时的更好的解决方案：

  1. 当您为 rects 重力算法定义“目标点”时，使它们不在圆的边界上，而是在一定距离之外。

    x = ((150 + radius) * Math.cos(angle)) + (width / 2) + offset; // Calculate the x position of the element.
y = ((150 + radius) * Math.sin(angle)) + (width / 2) + offset; // Calculate the y position of the element.

  2. 如果您希望矩形不与圆圈碰撞，则需要自定义力。由于矩形-圆碰撞的精确公式并不简单，也许将矩形视为圆就足够了，所以在后面加上nodes.forEach(...)：

    nodes.forEach(function(a) {
   const diag = Math.sqrt(a.width ** 2 + a.height ** 2) / 2;
   const rad = 150;
   const [cx, cy] = [500, 500];
   const [dx, dy] = [a.x - cx, a.y - cy];
   const dist = Math.sqrt(dx ** 2 + dy ** 2);
   const shift = Math.max(0, rad + diag - dist);
   a.x += shift * dx / dist;
   a.y += shift * dy / dist;
})

截屏

于 2018-11-28T12:41:29.537 回答
1

你的碰撞力太强了。让它少一点。

              lx *= 0.3;
              ly *= 0.3;

中心矩形可以添加

nodes.push( { x:500, y:500, width:300, height:300, fx:500, fy:500, center: true });

现在应该过滤矩形的绘制

  var g = svg.selectAll("g")
    .data(nodes.filter(d => !d.center))
    .enter()
    .append("g")

如果您还绘制中心矩形，则必须添加一个类

  g.append("rect")
    .attr("opacity", 0.5)
    .attr("class", "node")
    .attr("fill", "#ccc" )
    .attr("width", d => d.width )
    .attr("height", d => d.height )
    .attr("rx", 10)
    .attr("ry", 10);

并在带有类的矩形上的刻度函数过滤器中

svg.selectAll("rect.node")
  .attr("x", d => d.x - d.width / 2 )
  .attr("y", d => d.y - d.height / 2 );

添加测试以忽略中心rect

          if (a.center) return;

更新了强制代码

        nodes.forEach(function (a, i) {
          if (a.center) return;  // ignore this node
          // Apply gravity forces.
          a.x += (a.gravity.x - a.x) * kg;
          a.y += (a.gravity.y - a.y) * kg;
          nodes.slice(i + 1).forEach(function (b) {
            dx = (a.x - b.x)
            dy = (a.y - b.y)
            adx = Math.abs(dx)
            ady = Math.abs(dy)
            mdx = (1 + spaceAround) * (a.width + b.width) / 2
            mdy = (1 + spaceAround) * (a.height + b.height) / 2
            if (adx < mdx && ady < mdy) {
              l = Math.sqrt(dx * dx + dy * dy)
              lx = (adx - mdx) / l * k
              ly = (ady - mdy) / l * k

              lx *= 0.3;
              ly *= 0.3;

              // choose the direction with less overlap
              if (lx > ly && ly > 0) lx = 0;
              else if (ly > lx && lx > 0) ly = 0;
              dx *= lx
              dy *= ly
              a.x -= dx
              a.y -= dy
              b.x += dx
              b.y += dy
            }
          });
        });

编辑

一个修改是使运动独立于矩形中心的距离。只在另一个中心的相反方向移动一定量。

当前方法已将列表中后面的节点更改为新位置，并将下一个节点的碰撞基于这些新位置。更好的是首先根据时间 N 的所有节点计算运动，最后应用此运动。这是通过计算/修改节点的速度 ( d.vx, ) 在力模拟中完成的。d.vy模拟将在刻度上应用速度。

于 2018-11-29T05:33:50.037 回答