D3放大jquery按鈕點擊

我想實現一個簡單的d3 svg縮放功能。雙擊矩形時，縮放功能工作正常。D3放大jquery按鈕點擊

現在我試圖在jQuery按鈕點擊功能上實現相同的功能。但我在控制檯中遇到錯誤。

Uncaught TypeError: Cannot read property 'translate' of null 以下是我的代碼。

var zoom = d3.behavior.zoom() 
 
    .scaleExtent([1, 10]) 
 
    .on("zoom", zoomed); 
 

 
var vis = d3.select("#svg-canvas").append("svg") 
 
    .attr("width", "550") 
 
    .attr("height", "200") 
 
    .append("g") 
 
    .attr("class", "svg-container") 
 
    .attr("transform", "translate(10,10)") 
 
    .call(zoom); 
 

 
vis.append("rect") 
 
    .attr("x", 10) 
 
    .attr("y", 10) 
 
    .attr("width", 100) 
 
    .attr("height", 40) 
 
    .style("fill", "#444"); 
 

 
function zoomed() { 
 
    d3.select(".svg-container").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
 
} 
 

 
$(document).ready(function() { 
 
    $("#zoom").click(function() { 
 
    zoomed(); 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="svg-canvas"> 
 

 
</div> 
 

 
<button id="zoom"> 
 
    Zoom 
 
</button>

的功能不能正常工作。我做錯了什麼或者是否有可能實現這樣的功能？

來源

2016-02-12 Sooraj Chandran

瀏覽器控制檯上的任何錯誤？ –

是的，編輯了這個問題。 –

在你沒有d3.event集的點擊時間，因爲沒有活動從正在添加D3，因此你必須指定自己的規模/翻譯參數

function zoomClicked(translate, scale) { 
    d3.select(".svg-container").attr("transform", "translate(" + translate + ")scale(" + scale + ")"); 
} 

$(document).ready(function() { 
    $("#zoom").click(function() { 
     zoomClicked(4, 4); 
    }); 
});

來源

2016-02-12 09:20:59

D3擁有自己的事件生成機制雙擊。由於D3沒有處理元素上的點擊處理程序，因此您沒有d3.event。

d3.select(".svg-container") 
    .attr("transform", scale(2)");

來源

2016-02-12 09:23:18

D3放大jquery按鈕點擊

回答

相關問題