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按钮点击

回答

相关问题