Question

我试图在缩放功能中实现向下钻取功能，即我希望我的初始绘图显示例如50个点，当用户进行缩放时，点数增加到500个。 / p>

我的尝试包括在缩放功能内部重绘所有点，并在缩放比例低于阈值时移除部分点。正如您在此JSFIDDLE中看到的，该实现再现了向下钻取功能。

但是，我怀疑有更有效的方法来实施深入研究。因此，问题是我是否采用了正确的方式，或者有一种标准（更有效和更优雅）的方式来实现这种效果。

我的示例代码：

var width = 300,
    height = 300;

var randomX = d3.random.normal(width / 2, 40),
    randomY = d3.random.normal(height / 2, 40);

var data = d3.range(500).map(function() {
  return [randomX(), randomY()];
});

var svg = d3.select("body").append("svg");

var zoomBehav = d3.behavior.zoom();

svg.attr("height", height)
    .attr("width", width)
    .call(zoomBehav
            .scaleExtent([1, 10])
            .on("zoom", zoom));

// Initial plot
d3.select("svg").selectAll("circle")
    .data(data, function(d,i) {return i;})
  .enter()
    .append("circle")
    .attr("r", 3)
    .attr("cx", function(d) {return d[0]; })
    .attr("cy", function(d) {return d[1]; })
    .style("fill", "red");

d3.selectAll("circle")
      .filter(function(d, i) {
          if (zoomBehav.scale() < 2) { return i > 50; }
      })
      .remove();


function zoom(){
  var selection = d3.select("svg")
        .selectAll("circle")
      .data(data, function(d,i) { return i; });

    selection
        .attr("cx", function(d) { return d3.event.translate[0] + d3.event.scale * d[0]; })
        .attr("cy", function(d) { return d3.event.translate[1] + d3.event.scale * d[1]; });

    selection.enter()
        .append("circle")
        .attr("r", 3)
        .attr("cx", function(d) { return d3.event.translate[0] + d3.event.scale * d[0]; })
        .attr("cy", function(d) { return d3.event.translate[1] + d3.event.scale * d[1]; })
        .style("fill", "red");

    d3.selectAll("circle")
      .filter(function(d, i) {
          if (zoomBehav.scale() < 2) { return i > 50; }
      })
      .remove();
}

Answer 1

如果您对在XY画布上处理元素的语义缩放感兴趣，那么您将要查看d3.geom.quadtree：

https://github.com/mbostock/d3/wiki/Quadtree-Geom

您可以将您的积分传递给四叉树，并且它们将在空间上嵌套。然后，您可以将嵌套级别绑定到缩放级别并具有自动网格聚类。它比涉及到这个答案更加复杂，因为你必须提出表示聚类点的机制，你还需要进入递归函数来处理点的层次级别。

以下是使用四叉树进行语义缩放和聚类进行映射的示例：

http://bl.ocks.org/emeeks/066e20c1ce5008f884eb

使用向下钻取功能进行缩放

1 个答案: