比例SVG d3.js（無事件）

這是我的第一篇文章，我希望不會出錯。我正在使用庫d3.js，並且出現問題比例SVG d3.js（無事件）

現在放置我用來創建SVG（d3）的基本代碼。

var svg = d3.select("svg"), 
width = +svg.attr("width"), 
height = +svg.attr("height"), 
transform = d3.zoomIdentity;; 

var g = svg.append("g"); 

svg.call(d3.zoom() 
    .scaleExtent([1/2, 8]) 
    .on("zoom", zoomed)); 

function zoomed() { 
    g.attr("transform", d3.event.transform); 
}

我只提到了一個引用事件縮放的代碼示例。

現在我想問一下，如何在另一種類型的事件中更改我的代碼中的縮放比例（例如，當我按下按鈕時，我想回到位置x：0，y：0並縮放k ：1）？

到現在爲止，我已經學習了D3V4的源代碼，並且發現了一些使用ZoomEvent函數的debuger，但是我無法從我的代碼中調用它們。

然後我也試圖直接修改參數用：

g.attr("transform", "translate(0,0) scale(1)");

這個工作，但只要我用鼠標創建一個縮放事件，圖書館D3返回到老垢。

謝謝你，祝你一天

來源

2016-08-06 Il Mandorlone

您可以使用zoom.transform這個（與d3.zoomIdentity），這反過來會觸發相應的事件更新變換的狀態：

完整的示例：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <svg width="300" height="300"></svg> 
 
    <br/> 
 
    <button>reset zoom</button> 
 
    <script> 
 
    var svg = d3.select("svg"), 
 
     width = +svg.attr("width"), 
 
     height = +svg.attr("height"); 
 
     
 
    var g = svg.append("g"); 
 
    
 
    g.append("text") 
 
     .attr("x", width/2) 
 
     .attr("y", height/2) 
 
     .text("Something to zoom..."); 
 
     
 
    var zoom = d3.zoom() 
 
     .scaleExtent([1/2, 8]) 
 
     .on("zoom", zoomed); 
 

 
    svg.call(zoom); 
 

 
    function zoomed() { 
 
     g.attr("transform", d3.event.transform); 
 
    } 
 
    
 
    d3.select("button") 
 
     .on("click", function(d){ 
 
     svg.call(zoom.transform, d3.zoomIdentity); 
 
     }) 
 
    </script> 
 
</body> 
 

 
</html>

來源

2016-08-07 14:26:06 Mark

比例SVG d3.js（無事件）

回答

相關問題