D3:散点图上的标签布局

Question

我试图对分散图上的重叠标签做些什么，比如图片中的那个。

我正在使用d3fc，它确实很好地定位标签，然而，它是缓慢的，即使是少量的点(>100)，但实际的要求通常是>1000点。创建图表需要很长时间，缩放/填充几乎是不可能的。

d3fc有什么问题吗？如果没有，是否有其他稳定的自动标签布局方法可供使用？

我用的是贪婪的策略：

贪婪策略是减少标签重叠的一种非常快速的方法。它按顺序添加每个标签，选择标签与已经添加的矩形重叠最少的位置，并且位于容器内。 fc.layoutGreedy()

下面是带有简化的可复制代码的jsFiddle (尽管它没有加载d3fs库)- https://jsfiddle.net/f5oxcyg7/

​

​

Answer 1

代码的问题是，每次呈现图表时，都会重新评估布局策略。通常情况下，当第一次绘制图表不是问题时，大约100 is的渲染时间，但是如果您需要平移/缩放，那么这将成为一个问题。

我想出的解决方案是“缓存”布局的结果，以便在缩放图表时不会对其进行重新评估。但是，当缩放操作结束时，将重新评估布局以消除冲突.

首先，处理缩放事件以打开/关闭缓存行为：

var returnCachedLayout = false;
var zoomBeh = d3.behavior.zoom()
    .x(x)
    .y(y)
    .scaleExtent([0, 500])
    .on("zoomstart", function() {
      returnCachedLayout = true;
        zoom()
     })
    .on("zoom", zoom)
    .on("zoomend", function() {
      returnCachedLayout = false;
        zoom()
     })

然后对该策略进行调整，以利用高速缓存：

var strategyCache = function (strategy) {
  var cachedLayout;

  var cache = function(layout) {
    if (!returnCachedLayout) {
      cachedLayout = strategy(layout);
      // determine the offset applied by the layout
      for (var i = 0; i< layout.length; i++) {
        cachedLayout[i].dx = layout[i].x - cachedLayout[i].x;
        cachedLayout[i].dy = layout[i].y - cachedLayout[i].y;
      }
    } else {
      // update the location of each label, including the offset
      for (var i = 0; i< layout.length; i++) {
        cachedLayout[i].x = layout[i].x - cachedLayout[i].dx;
        cachedLayout[i].y = layout[i].y - cachedLayout[i].dy;
      }
    }
    return cachedLayout;
  };
  return cache;
};

// construct a strategy that uses the "greedy" algorithm for layout, wrapped
// by a strategy that removes overlapping rectangles.
var strategy = strategyCache(fc.layout.strategy.removeOverlaps(fc.layout.strategy.greedy()));

这有点棘手，因为不能只是重新呈现缓存中的标签，因为缩放行为会导致这些点移动。这就是为什么偏移量也被存储，以便可以重新应用到新位置的标签上。

总之，这里有一个完整的例子：

https://jsfiddle.net/qrpr0wre/

我想让这成为D3FC标签布局的“头等”功能。