javascript - D3 : Label layout on scatterplots

Question

我正在尝试对散点图上的重叠标签进行一些操作，如图所示。

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

我对 d3fc 做错了什么吗？如果没有，是否有其他稳定的自动标签布局方法可用？

我正在使用贪婪策略:

The greedy strategy is a very fast way of reducing label overlap. It adds each label in sequence, selecting the position where the label has the lowest overlap with already added rectangles and is inside the container.

fc.layoutGreedy()

这是带有简化的可重现代码的 jsFiddle(尽管它不加载 d3fs lib)- https://jsfiddle.net/f5oxcyg7/

Answer 1

代码的问题在于每次渲染图表时都会重新评估布局策略。通常，首次渲染图表时大约 100 毫秒的渲染时间不是问题，但如果您需要平滑的平移/缩放，那么这就会成为问题。

我提出的解决方案是“缓存”布局的结果，以便在缩放图表时不会重新评估它。但是，当缩放操作完成时，会重新评估布局以消除冲突。

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

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-label-layout 的“一流”功能。