D3缩放jquery按钮单击

Question

I'm trying to implement a simple d3 svg zoom functionality. On double clicking the rectangle the zoom functionality is working fine.

Now i'm trying to implement the same functionality on a jquery button click function. But i'm getting following error in the console.

Uncaught TypeError: Cannot read property 'translate' of null Following is my code.

 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> 

The functionality is not working. What am i doing wrong or is it possible to implement such functionality ?

Answer 1

At the time of the click you don't have d3.event set, because no events is comming from d3, hence you have to specify yourself the scale / translate parameters

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

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

Answer 2

D3 has its own event generating mechanism on double click. As you have the click handler on an element that is not handled by D3, you don't have a d3.event .

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