HTML / D3.js － how to zoom from the mouse cursor rather than top-left corner

Question

I have a picture like this( demo ), and can zoom it through mousewheel up or down. But it just can zoom from top-left corner...

How can I try to make it zoom from the mouse cursor point (like this example ). Also, I need to have picture boundary, not like this example is boundless .Thanks for any answer or suggestion.

Html, css

//Html
<div id="picture"></div>

//css
#picture {
  width: 340px;
  height: 150px;
  overflow: auto;
}

JavaScript

createSVG = function () {

  var svg = d3.select('#picture')
  .append('svg')
  .attr('width', rw)
  .attr('height', rh)
  .style('border', '1px solid #000');

  svg.append('svg:image')
    .attr('xlink:href', 'http://www.iconpng.com/png/beautiful_flat_color/computer.png')
    .attr('width', rw)
    .attr('height', rh);
}


//Init (Original size)
var Picture_w = 340;
var Picture_h = 150;
value = 96;                      //(scaling ratio)
rw = Picture_w * value / 100;
rh = Picture_h * value / 100;

createSVG();

// When change scaling ratio, RE createSVG();
changeSize = function () {
  d3.select('svg').remove();

  rw = Picture_w * value / 100;
  rh = Picture_h * value / 100;

  createSVG();
};


//mousewheel (Chrome or IE)
$('#picture').on('mousewheel DOMMouseScroll', function (e) {
  e.preventDefault();
  if (e.type == 'mousewheel') {
    if (e.originalEvent.wheelDelta > 0) {

      value += 2;
      if (value > 500) {
        value = 500;
      }
      changeSize();
      // console.log(e.originalEvent.wheelDelta);
    }
    else {

      value -= 2;
      if (value < 5) {
        value = 5;
      }
      changeSize();
      // console.log("w" + e.originalEvent.wheelDelta);
    }
  }

});

Answer 1

I am not sure what you are looking but, I created a D3 zoom with your code and implemented zoom with Mike Bostock's Block approach.

Idea is to create zoom behavior and apply it to the specified selection/element.

 var parent = d3.select("#picture"); var zoom = d3.zoom() .scaleExtent([0.5, 8]) .on("zoom", zoomed); parent.call(zoom); function zoomed() { parent.select("svg").attr("transform", d3.event.transform); } function reset() { parent.transition() .duration(750) .call(zoom.transform, d3.zoomIdentity); } 

 #picture { width: 340px; height: 150px; overflow: auto; } .parent { border : 1px solid #000; } 

 <script src="//d3js.org/d3.v5.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <div id="picture"> <svg width="330" height="140" class="parent"><g class="image"><image xlink:href="http://www.iconpng.com/png/beautiful_flat_color/computer.png" width="330" height="140" class="pictureWrapper"></image></g></svg> </div> <button onclick="reset()">Reset</button>