Question

我在d3地图上使用模糊效果，如下所示：http://geoexamples.blogspot.in/2014/01/d3-map-styling-tutorial-ii-giving-style.html？

但是在使用这种方法之后（由于数据如何加载......使用数据），我的缩放功能随机运行。无论我在哪里点击它都缩放到同一点。此外，使用过滤器后动画变得非常慢。

还有其他方法可以实现模糊吗？或者解决这个问题？

任何帮助？

感谢。这是在需要过滤的情况下创建世界的代码（根据上述网站上的代码使用数据）。

d3.json("world-110m2.json", function(error, world) {
 g.insert("path")
  .datum(topojson.feature(world, world.objects.land))
  .attr("d", path);
g.insert("path")
  .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
  .attr("d", path)
  .append("path");

    g.selectAll("path")
    .on("click", click);})

这是在不需要过滤的情况下使用的代码（不使用数据 - 可能是数据导致问题）

d3.json("world-110m2.json", function(error,topology) {
            g.selectAll("path")
                .data(topojson.object(topology, topology.objects.countries)
                .geometries)
                .enter()
                .append("path")
                .attr("d",path)
                .on("click", click);)}

这是缩放功能：从这里获取代码：http://bl.ocks.org/mbostock/2206590

function click(d) {

var x, y, k;
var centered;
if (d && centered !== d) {
var centroid = path.centroid(d);
x = centroid[0];
y = centroid[1];
k = 4;
centered = d;
} else {
x = width / 2;
y = height / 2;
k = 1;
centered = null;
}
if (active === d) return reset();
          g.selectAll(".active").classed("active", false);
          d3.select(this).classed("active", active = d);
          var b = path.bounds(d);

          g.selectAll("path")
              .classed("active", centered && function(d) { return d    === centered; });

          g.transition()
              .duration(750)
              .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
              .style("stroke-width", 1.5 / k + "px");

}

Answer 1

模糊过滤器消耗大量资源，如帖子所示。特别是如果你将它与其他过滤器结合使用。

一种解决方案是使用Canvas而不是SVG。 Here你有一些使用Canvas元素的过滤器。应该可以实现相同的结果。

我无法找到缩放停止工作的原因，但由于您使用了所有数据，性能较慢，因此您将过滤器应用于所有数据，而不是仅使用您显示的单词部分，因此缩放时使用的是更大的图像。

d3 map - 使用模糊滤镜后，缩放无法正常工作

1 个答案: