D3v4 answer
blockquote>Если вы ищете то же самое, но с D3 v4,
var zoom = d3.zoom().on("zoom", zooming); vis = svg.append("svg:svg") .attr("width", width) .attr("height", height) .call(zoom) // here .call(zoom.transform, d3.zoomIdentity.translate(100, 50).scale(0.5)) .append("svg:g") .attr("transform","translate(100,50) scale(.5,.5)");
Есть много способов, один, если использовать общее событие onclick в вышестоящем элементе. Вот пример:
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
window.onclick = myFunction;
<div class="topnav">
<a href="#home" class="nt"><strong>NELSON TRAILS</strong></a>
<div id="myLinks">
<a class="sub">SHORT WALKS</a>
<a class="sub">DAY TRIPS</a>
<a class="sub">MULTI-DAY</a>
<a class="sub">MAP EXPLORER</a>
<a class="sub">TRAIL SEARCH AND FILTER</a>
<a class="sub">TRAIL ALERTS</a>
<a class="sub">ABOUT</a>
</div>
<a class="icon" onclick="myFunction()"><i class="fa fa-bars">Menu</i></a>
</div>
Конечно window
не очень хороший элемент для использования, поскольку polutes JS пространство имен. Поместите это в элемент, который находится над вашим меню и охватывает всю страницу. Вы можете использовать корневой div или что-то в этом роде.