D3 zoom on jquery button click

Question

Я пытаюсь реализовать простую функцию масштабирования dvvv svg. При двойном нажатии на прямоугольник функция масштабирования работает нормально.

Теперь я пытаюсь реализовать ту же функциональность при нажатии кнопки 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>

Функциональность не работает. Что я делаю неправильно или возможно реализовать такую ​​функциональность?

Answer 1

В момент щелчка вы не установили d3.event, потому что никаких событий не пришедшего от d3, следовательно, вы должны указать себе масштаб/перевести 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 имеет свой собственный механизм генерации событий при двойном щелчке. Поскольку у вас есть обработчик кликов на элементе, который не обрабатывается D3, у вас нет d3.event.

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