score:9

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 = d3.select("svg")
  .attr("width", "100%")
  .attr("height", "100%")
  .style("background-color", "#eeeeee")
  .call(zoom)
  .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");
d3.select("#zoom_in").on("click", function() {
  zoom.scaleBy(svg.transition().duration(750), 1.2);
});
d3.select("#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="https://d3js.org/d3.v4.min.js"></script>

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


Related Query

More Query from same tag