Question

我有两个从shapefile获得的topojson文件，我将它附加到嵌套循环中svg元素的同一g节点。

// Layer 1
d3.json("grid.topojson", function(error, grid) {

  // Layer 2 (continents)
  d3.json("continents.topojson", function(error, continent) {

  ...

可以点击大陆来放大特定区域（来自https://bl.ocks.org/mbostock/4699541）。

网格图层非常密集，因此在单击大陆图层中的大陆时会降低缩放速度。为了解决这个问题，我想在放大特定大陆后才显示网格图层。我有一个触发缩放功能的.on("click")事件：

function clicked(path, d, m_width, m_height, _this, grid) {

        var this_class = get_classFromPath(_this);

        var bounds = path.bounds(d),
          dx = bounds[1][0] - bounds[0][0],
          dy = bounds[1][1] - bounds[0][1],
          x = (bounds[0][0] + bounds[1][0]) / 2,
          y = (bounds[0][1] + bounds[1][1]) / 2,
          scale = .2 / Math.max(dx / m_width, dy / m_height),
          translate = [m_width / 2 - scale * x, m_height / 2 - scale * y];

        g.transition()
          .duration(750)
          .style("stroke-width", 1.5 / scale + "px")
          .attr("transform", "translate(" + translate + ")scale(" + scale + ")");
          // .selectAll("path.model-grid")
          // .style("display", "inline");
      }

在clicked函数中，我希望在缩放后使网格可见，但使用selectAll似乎没必要（而且速度很慢），因为只有一小部分网格是在显示屏中可见。不幸的是，网格的shapefile不包含任何可以用来与各大洲的id相关联的ID，因此我无法通过id选择网格路径元素。

有没有办法找出缩放后bounds框中包含网格图层的哪些路径元素？

非常感谢任何帮助，谢谢！

d3js仅显示包含在边界框中的路径元素

0 个答案: