Accepted answer

Follow the comment and read through the confusion of naming a var svg and and creating an svg element.

let zoom = d3.zoom().on("zoom", zoomed);

let svg ="svg")
  .attr("width", "100%")
  .attr("height", "100%")
  .style("background-color", "#eeeeee")
  .on("dblclick.zoom", null);
let g = svg.append("g");
//d3.selectAll("#zoom-section i").on("click", zoomClick);
g.append("circle").attr("r", 50).attr("fill", "red");"#zoom_in").on("click", function() {
  zoom.scaleBy(svg.transition().duration(750), 1.2);
});"#zoom_out").on("click", function() {
  zoom.scaleBy(svg.transition().duration(750), 0.8);

function zoomed() {
    g.attr("transform", d3.event.transform);
<svg width="960" height="500"></svg>
<script src=""></script>

<button id="zoom_in">+</button>
<button id="zoom_out">-</button>

Related Query

More Query from same tag