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

其技术名称为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函数每秒将运行数十次，通常在模拟冷却之前运行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>

Answer 2

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

将其添加为tick函数的最后一行。现在，您强制节点位于y == 0

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

并将碰撞力的半径设置为实际半径（25）

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

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

2 个答案: