Question

我正在尝试根据点击事件放大地图上的不同点。

这是我的代码：

var centered;
var x;
var y;
var zoomLevel;

var zoomSettings = {
    duration: 1000,
    ease: d3.easeCubicOut,
    zoomLevel: 10
};


svg.selectAll("path")
   .data(json_data.features)
   .enter()
   .append("path")
   .attr("d", path)
   .attr("cursor","pointer")
   .style('stroke', '#FFA183')
   .style('stroke-width', '1')
   .on("click", function (d) {
      if(d && centered !== d) {
         var centroid = path.centroid(d);

         x = centroid[0];
         y = centroid[1];
         zoomLevel = zoomSettings.zoomLevel;
         centered = d;
     } else {
         x = w/2;
         y= h/2;

         zoomLevel = 1;
         centered = null;
        }  
    });

我已经看过堆栈溢出的一些答案，但它们似乎都没有指出我正确的方向！

Answer 1

看起来您只计算翻译和缩放值。您还希望将新的转换值应用到svg路径：

svg.selectAll("path").attr("transform", "translate(" +  w / 2 + "," + h / 2 + ")scale(" + zoomLevel + ")translate(" + -x + "," + -y + ")").style("stroke-width", 1.5 / zoomLevel + "px");

理想情况下，所有路径都在svg中分组，变换应用于组。请在此处查看Mike Bostock的示例：https://bl.ocks.org/mbostock/2206590

希望这有帮助！

d3.js点击缩放功能不起作用

1 个答案: