score:3
Accepted answer
You are applying your transform directly to the svg element. You instead want to wrap your image it in a g and apply the transform to that:
var svg = d3.select("svg");
var g = svg.select("g");
svg.attr("width", "100%")
.attr("height", "100%")
.attr('viewBox', '0 0 1200 1200').attr("preserveAspectRatio", "xMidYMid meet").call(d3.behavior.zoom().on("zoom", function() {
g.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
}));<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="col-sm-8 text-left" id="vis" width="100%" height="100%">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<g>
<image id="image0" width="1200" height="1200" x="0" y="0"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAASwCAQAAABBKHtEAAAABGdBTUEAALGPC/xhBQAAAAJiS0dE
AACqjSMyAAAACXBIWXMAAASwAAAEsACQKxcwAAAAB3RJTUUH4gETCjo7caFzYwAAGCJJREFUeNrt
2jGOXWcdh+H/xPdOjEQTiJCxbAdDBOwlK0BpqCioaFgELRKiQ2yAzUQBgRAkJCSxFQKU9szYQ0GD
m8lY81rfOeR5VvDTd+Z8eufqnAzbcbl6AAA79N68O++vHsGLXls9AADg/43AAgCICSwAgJjAAgCI
CSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwA
gJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjA
AgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCI
CSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwA
gJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjA
AgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCI
CSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwA
gJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjA
AgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCICSwAgJjAAgCI
HVYPYDcu5i9zvnrEjp3OwzmuHnGFs/lwzlaP2LHX58G8vnrEFZ7OR/N09Ygduz335vbqEeyLwOK6
/jU/nc9Xj9ixu/PbubN6xBUez8/m76tH7NjD+eW8tXrEFT6Zn89fV4/Yrcv5/vxi3l49g30RWFzX
+fx+Hq8esWP/3vjvQ2fzh/nb6hE79mSerJ7wJfv+OH9aPWLHnm/8+bJBvsHiuk7m1uoJu7b909v+
wi27NSerJ1zJ+3szTo+XJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGIC
CwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAg
JrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAA
AGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGIC
CwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAg
JrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAA
AGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGIC
CwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAg
JrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAA
AGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGIC
CwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAg
JrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAA
AGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGIC
CwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAg
JrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAA
AGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGIC
CwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAg
JrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAA
AGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICCwAgJrAAAGICi+u6nMvVE3Zt
+6e3/YVbtv3T2/7CLXN6vLTD6gHsxmG+M19bPWK3Luf+xt+24zyYk9UjdutyHsxx9YgrHef+PF09
Yrcu5/6crh7B3rhQt2Tb/yNdzMfzbPWI3bqc49zbdGKdz6dzvnrEbl3O6dzddGKdzaM5Wz1ity7n
9bmz6cR6b96d91eP4EVbvvDZlsM8XD2BV+g4b62ewCt0Og9WT4CvFt9gAQDEBBYAQExgAQDEBBYA
QExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExg
AQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDE
BBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYA
QExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExg
AQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDE
BBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYA
QExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExg
AQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDE
BBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYA
QExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExg
AQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDE
BBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYAQExgAQDEBBYA
QExgAQDEDqsHsBvP5vN5vnrEjt2aN+fW6hFXuJgv5tnqETt2mG9s+j69mH/OxeoRO3aYN+a4egT7
suULgW35x7wzj1eP2LH787u5u3rEFT6ZH81Hq0fs2Nvzm/nu6hFX+GB+Mn9ePWLHfji/mh+sHsG+
CCyu69l8Oo9Wj9ixw8Z/P7iYz+aT1SN27Osbf77n88jzvYE35nz1BPbGN1hc14m/lhs5WT3gS3m+
N7H15+v9vZmtP182yCsHABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAA
MYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEF
ABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABAT
WAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAA
MYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEF
ABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABAT
WAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAA
MYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEF
ABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABAT
WAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAA
MYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEF
ABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABAT
WAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAA
MYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEF
ABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABAT
WAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAA
MYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEF
ABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABAT
WAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWFzX5TxfPWHXtn96
21+4ZVs/Pe/vzTg9Xtph9QB24zBvze3VI3bs3sbftuM8WD1h1+7PcfWEK53O/XmyesSO3ZvT1RPY
m5PVA/gfl6sHXOnZPJ5nq0fs2GG+NbdWj7jCxXw+F6tH7Nhx3tx0Qp/PF3O+esSOHeebm07o9+bd
eX/1CF605QuBbbk1d1dP4BU6zLdXT+AVOs6d1RPgq8U3WAAAMYEFABATWAAAMYEFABATWAAAMYEF
ABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABAT
WAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAA
MYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEF
ABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABAT
WAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAA
MYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEF
ABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABAT
WAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAA
MYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEF
ABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABAT
WAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAA
MYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEF
ABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABAT
WAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAA
MYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEFABATWAAAMYEF
ABATWAAAscPqAcAmnM+jOV89YseOc2eOq0cA2yGwgJmZz+bH8/HqETv2vfn1PFw9AtgOgQXMzJzP
B/Ph6hE79tqcrZ4AbIlvsID/chvcxGtzsnoCsCWuVACAmMACAIgJLACAmMACAIgJLACAmMACAIgJ
LACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACA
mMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMAC
AIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJ
LACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACA
mMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMAC
AIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJ
LACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACA
mMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMAC
AIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJ
LACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACA
mMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMAC
AIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJ
LACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACA
mMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMAC
AIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJ
LACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACA
mMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMAC
AIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJLACAmMACAIgJ
LACAmMACAIgJLACA2H8ADmaGMQHKeAgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDEtMTlUMTA6
NTg6NTktMDc6MDAnfKHZAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTAxLTE5VDEwOjU4OjU5LTA3
OjAwViEZZQAAACZ0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vdG1wL3RtcE93aWg3ei5zdmc4UA53
AAAAAElFTkSuQmCC" />
</g>
</svg>
</div>
Source: stackoverflow.com
Related Query
- SVG jumps when try to move it
- Resize svg when window is resized in d3.js
- d3.js - How can I set the cursor to hand when mouseover these elements on SVG container?
- Can I move an SVG element between SVG groups, in d3.js
- mouseout/mouseleave gets fired when mouse moves INSIDE the svg path element
- IE11 does not accept SVG height and width when using D3
- How to simulate mouse move in D3 so when you drag nodes, other nodes move automatically?
- How to show and hides nodes when you move the mouse over a node in D3 Javascript
- How to show a tooltip with value when mouseover a svg line graph using d3.js?
- D3, SVG and textPath: How to move the text down?
- SVG circles don't get repositioned when zooming leaflet map
- Receive Uncaught SecurityError when accessing SVG objects from Javascript
- d3 / svg layering issue when adding new nodes after a time
- How to move elements along with svg group
- d3: Elements move when scale() transform is applied
- Force simulation is jittery when using svg transforms to update position
- Adding css style when converting svg to png
- Move an SVG object along a line or a path
- D3.zoom jumps when using mouse wheel after programmatically zoom
- d3.js pan and zoom jumps when using mouse after programatic zoom
- How do you move an SVG around a webpage without triggering slow redraws?
- SVG viewbox is ignored when composing from js
- Black area when exporting graph from svg (d3.js) to jpg
- Why does this SVG graphic bog down Webkit only when it's large?
- Bootstrap popover on svg element repositions itself incorrectly when page is scrolled
- How do I get the d3 svg points to stay in their correct position on the leaflet map when zooming?
- How do you translate HTML elements along with SVG elements when zooming and panning with D3
- How to let line or path follow the shape when shape are move
- update display in loop when drawing many d3 svg objects
- Move an SVG element across Divs
More Query from same tag
- how to make scrollable axis/ pan along x-axis in d3js
- d3.js accessing the DOM on ready document
- d3.time.scale() not working date inputs on IE 10 and Firefox
- d3 v4 X-axis ticks
- Slicing data in d3.js
- Selecting null: what is the reason behind selectAll(null) in D3?
- How can I set the transform origin to the middle of this rectangle in D3?
- Binning an array in javascript for a histogram
- i change the "class" attribute of a node that exist in SVG, but not applied ! why?
- Compilation errors when drawing a piechart using d3.js and TypeScript
- Adding style to SVG shape with a conditional statement
- How to include external JavaScript library properly so that its class is avialable in VueJs component?
- Perfomance Issue using selectAll in ie8 and ie9
- Is it possible to give specific color for stacks on Bar graph in dimple.js?
- Efficient way to compute the median of an array of canvas in JavaScript
- Stroke on rect in D3 blurry
- D3.js dynamical style() function with geoJSON data
- d3.js: legends with dynamic element width
- How to bind a changing datasource to a set of svg?
- Dcjs cursor and tooltips
- How to add text to svg circle in d3
- D3.js "Error: Invalid value for <path> attribute" for moving average
- Script does not work locally but does on server
- In D3.js How to draw a map with full screen width?
- D3 Graphs in Rails: multiple Js files overlapping
- Creating horizontal legend with d3.js (v4)
- Issue on zoom inside a d3.js chart
- Just Change Tick labels
- using d3.js with aurelia framework
- How do I add a transform attribute to svg subgroups in d3.js?
