d3 map - 흐림 필터를 사용한 후 줌이 제대로 작동하지 않습니다.

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

흐림 필터는 게시물에 표시된대로 많은 리소스를 사용합니다. 당신이 다른 필터와 결합한다면 특별히 그렇습니다.

하나의 솔루션은 SVG 대신 Canvas를 사용합니다. Here Canvas 요소를 사용하는 일부 필터가 있습니다. 동일한 결과를 얻을 수 있어야합니다.

줌이 작동을 멈추는 이유는 모르겠지만 모든 데이터를 사용하기 때문에 성능이 저하되므로 표시하는 단어의 일부만을 사용하는 대신 모든 데이터에 필터를 적용하고, 확대/축소 할 때 훨씬 더 큰 이미지를 사용하게됩니다.