D3 Zoom functionality is not working in Google chrome

Question

i am working on svg project i use d3.js for better ui , in my chart adding zoom functionality but strange it's zoom is not working in Google chrome

svg.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom));

function zoom() {
    svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

and also i want to prevent translate on node drag because node and pane both dragiing at same time so it's looks very ugly. here is my fiddle

for test drag left element to right div

Answer 1

You're basically there. To get the zoom behaviour to work, transform a g element directly underneath the svg instead of the svg itself -- that has no effect. To prevent dragging of the nodes on SVG drag, you can use the nodedrag variable you've set up already -- just set it to true on dragstart and false on dragend.

Complete jsfiddle here.