使用D3放大使用

Question

如何放大svg上的某個點，然後縮小到整個svg。只有兩種狀態，我不需要鼠標滾動縮放或放大，縮小按鈕。

我在d3文檔中查找並找到.zoom，但我不確定如何在我的環境中應用。我只看到過於複雜的滾動縮放。

Answer 1

Checkout的鼠標縮放通常被實現：

var svg = d3.select("#svg") 
    .call(d3.behavior.zoom().on("zoom", redraw)) 

function redraw() { 
    console.log("translate: ", d3.event.translate, "scale:", d3.event.scale); 
    svg.attr("transform", 
     "translate(" + d3.event.translate + ")" 
     + " scale(" + d3.event.scale + ")"); 
} 

滾動會吐出像：

translate: [-66.3438, -36.359] scale: 1.1809 

爲了避免實施滾動縮放，您可以直接修改您的SVG改造屬性就像重繪功能一樣。只需使用你自己的值而不是d3.event.translate。例如：

svg.attr("transform", 
     "translate(" + [0,0] + ")" 
     + " scale(" + 2 + ")"); 

會將2x放大到svg的中心。使用5而不是2會放大5倍。

click to zoom map示例有很好的演示如何做到這一點