使用力布局在水平轴上定位圆圈而不重叠

Question

我想在 d3 尺度上放置圆圈并以不重叠的方式放松它们。我知道这会降低准确性，但这对于我想要生成的图表类型来说是可以的。

这是我的最小（非）工作示例：https://jsfiddle.net/wmxh0gpb/1/

<body>
  <div id="content">
    <svg width="700" height="200">
      <g transform="translate(50, 100)"></g>
    </svg>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

  <script>
var width = 600, height = 400;
var xScale = d3.scaleLinear().domain([0, 1]).range([0, 300]);

var numNodes = 5;
var nodes = d3.range(numNodes).map(function(d, i) {
  return {
    value: Math.random()
  }
});

var simulation = d3.forceSimulation(nodes)
  .force('x', d3.forceX().strength(0.5).x(function(d) {
    return xScale(d.value);
  }))
  .force('collision', d3.forceCollide().strength(1).radius(50))
  .on('tick', ticked);

function ticked() {
  var u = d3.select('svg g')
    .selectAll('circle')
    .data(nodes);

  u.enter()
    .append('circle')
    .attr('r', function(d) {
      return 25;
    })
    .style('fill', function(d) {
      return "black";
    })
    .merge(u)
    .attr('cx', function(d) {
      return d.x;
    })
    .attr('cy', function(d) {
      return 0
    })
    .attr("opacity", 0.5)

  u.exit().remove();
}
  </script>
</body>

圆是使用 forceX 力定位的，应使用 forceCollide 防止碰撞。然而，圆圈似乎找到了一个稳定的位置，不管重叠而不是避开它。

我做错了什么？

Answer 1

因为你忽略了力模拟的y坐标

将此添加为 tick 函数的最后一行。现在你强制节点在 y==0

nodes.forEach(e => { e.fy = 0 });

并将碰撞力的半径设置为实际半径(25)

.force('collision', d3.forceCollide().strength(1).radius(25))

Answer 2

它的技术名称是beeswarm chart：只有一个轴包含有意义的信息，另一个轴仅用于分隔节点。

要在 D3 中创建蜂群图表，您还必须将 y 位置传递给力（如 d3.forceY），在本例中为 0（因为您重新翻译小组），例如：

var simulation = d3.forceSimulation(nodes)
    .force('x', d3.forceX(function(d) {
        return xScale(d.value);
    }).strength(0.8))
    .force('y', d3.forceY(0).strength(0.2))

如您所见，forceX 和 forceY 具有不同的 strength 值。您必须与它们一起玩，直到找到适合您的组合：毕竟，蜂群图表是准确性和避免节点重叠之间的权衡。

与问题无关，但非常重要：从 ticked 函数中删除与重新定位节点无关的所有内容。 ticked 函数每秒将运行数十次，通常在模拟冷却之前运行ning 300 次。更新、进入和退出选择300次毫无意义！

这是您的代码，其中包含这些更改：

<body>
  <div id="content">
    <svg width="700" height="200">
      <g transform="translate(50, 100)"></g>
    </svg>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

  <script>
    var width = 600,
      height = 400;
    var xScale = d3.scaleLinear().domain([0, 1]).range([0, 300]);

    var numNodes = 5;
    var nodes = d3.range(numNodes).map(function(d, i) {
      return {
        value: Math.random()
      }
    });

    var simulation = d3.forceSimulation(nodes)
      .force('x', d3.forceX(function(d) {
        return xScale(d.value);
      }).strength(0.8))
      .force('y', d3.forceY(0).strength(0.2))
      .force('collision', d3.forceCollide().strength(1).radius(25))
      .on('tick', ticked);

    var u = d3.select('svg g')
      .selectAll('circle')
      .data(nodes);

    u = u.enter()
      .append('circle')
      .attr('r', function(d) {
        return 25;
      })
      .style('fill', function(d) {
        return "black";
      })
      .merge(u)
      .attr("opacity", 0.5)

    u.exit().remove();

    function ticked() {
      u.attr('cx', function(d) {
          return d.x;
        })
        .attr('cy', function(d) {
          return d.y
        })
    }

  </script>
</body>

使用力布局在水平轴上定位圆圈而不重叠

Position circles on a horizontal axis without overlapping using force layout

d3.js

data-visualization

force-layout