How not to keep aspect ratio when resizing an image in d3.js

Question

I have the following HTML:

<div id="MainDiv"></div> 

and Javascript code:

  var cursor; var width, height; var testSVG = { x: 0, y: 0, id: 0, image: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Small_Flag_of_the_United_Nations_ZP.svg/488px-Small_Flag_of_the_United_Nations_ZP.svg.png", width: 280, height: 140 }; var svgContainer = d3.select("#MainDiv").append("svg").attr({ width: 1920, height: 1080, version: 1.1, xmlns: "http://www.w3.org/2000/svg", viewBox: "-40, -40, 2000, 1160", "class": "GraphicDesigner" }); createSVG(svgContainer, testSVG); function createSVG(container, object) { var d = [{ x: object.x, y: object.y, moveX: object.x, movey: object.y }]; var svgObjectGroup = container.data(d).append("g").attr("transform", function (d) { return "translate(" + dx + "," + dy + ")"; }).call(onDragDrop(dragmove, dropHandler)) .attr("id", object.ID).attr("class", "masterTooltip"); svgObjectGroup.append("svg").attr({ width: object.width, height: object.height, viewBox: "0, 0, " + object.width + ", " + object.height }).append("svg:image") .attr({ preserveAspectRatio: "none", width: object.width, height: object.height, "xlink:href": object.image }); var dragSize = 16; svgObjectGroup.append("rect").attr({ x: object.width - dragSize, y: object.height - dragSize, width: dragSize, height: dragSize, rx: 0, fill: "#FFFFFF", stroke: "black", "stroke-width": 1, cursor: "se-resize", "class": "sizers" }); } function onDragDrop(dragHandler, dropHandler) { var drag = d3.behavior.drag(); drag.on("drag", dragHandler).on("dragstart", startHandler).on("dragend", dropHandler); return drag; } function startHandler() { cursor = "se"; d3.event.sourceEvent.stopPropagation(); if (d3.event.sourceEvent.srcElement.attributes.cursor != undefined) cursor = d3.event.sourceEvent.srcElement.attributes.cursor.nodeValue; //Todo. Doesn't work in IE } function dragmove() { if (cursor != null) { if (cursor.startsWith("se")) { //South-East d3.select(this)[0][0].firstChild.height.baseVal.value = d3.select(this)[0][0].firstChild.height.baseVal.value + d3.event.dy; d3.select(this)[0][0].firstChild.width.baseVal.value = d3.select(this)[0][0].firstChild.width.baseVal.value + d3.event.dx; } var sizers = d3.selectAll(".sizers"); sizers.remove(); if (d3.select(this)[0][0].firstChild.height.baseVal.value < 1) d3.select(this)[0][0].firstChild.height.baseVal.value = 1; if (d3.select(this)[0][0].firstChild.width.baseVal.value < 1) d3.select(this)[0][0].firstChild.width.baseVal.value = 1; height = d3.select(this)[0][0].firstChild.height.baseVal.value; width = d3.select(this)[0][0].firstChild.width.baseVal.value; } } function dropHandler() { d3.selectAll("svg").remove(); svgContainer = d3.select("#MainDiv").append("svg").attr({ width: 1920, height: 1080, version: 1.1, xmlns: "http://www.w3.org/2000/svg", viewBox: "-40, -40, 2000, 1160", "class": "GraphicDesigner" }); d3.select(this).style("cursor", "default"); testSVG = { x: 0, y: 0, id: 0, image: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Small_Flag_of_the_United_Nations_ZP.svg/488px-Small_Flag_of_the_United_Nations_ZP.svg.png", width: width, height: height }; createSVG(svgContainer, testSVG); } 

I also have jsfiddle here: http://jsfiddle.net/Family/zvrfp3oL/

NOTE. This code does not work in Internet Explorer, it works in Chrome, Edge and Firefox.

If I try to resize the image by clicking and dragging it in the lower right corner, the image will resize correctly when the mouse button is released. But is there a way to correctly display the image while dragging it. Be that as it may, as he tries to keep the aspect ratio, he looks like the x and y coordinates are moving.

Answer 1

You can achieve this by changing the "background-size" property when resizing.

You need to create an absolutely positioned div inside the resizable div and add drag and drop behavior to it.

Here is jsFiddle . Drag the orange rectangle to resize.

Here is the relevant code:

 var resizable = d3.select('#resizable'); var resizer = resizable.select('.resizer'); var dragResize = d3.behavior.drag() .on('drag', function() { x = d3.mouse(this.parentNode)[0]; y = d3.mouse(this.parentNode)[1]; x = Math.max(50, x); y = Math.max(50, y); resizable .style('background-size', x + 'px' + ' ' + y + 'px') .style('width', x + 'px') .style('height', y + 'px') ; resizer .style('left', x + 'px') .style('top', y + 'px') ; }) resizer.call(dragResize); 

CSS

 #resizable { position: relative; width: 200px; height: 200px; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Small_Flag_of_the_United_Nations_ZP.svg/488px-Small_Flag_of_the_United_Nations_ZP.svg.png") ; background-size:cover; background-repeat:no-repeat; // background-position:center; } #resizable .resizer { position: absolute; width: 10px; height: 10px; bottom: 0; right: -10px; background: orange; opacity: .5; cursor: pointer; } 

HTML:

 <div id="resizable"> <div class="resizer"></div> </div>