d3.js - d3 zoom and pan upgrade to version 4 -


help appreciated updating code below work in version 4. have changed zoom.behaviour d3.zoom i'm not clear other changes needed. looks more complicated v3!

<!doctype html> <html>   <head>    <!-- <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>-->     <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>      <style type="text/css">       body, html {         width: 100%;         height: 100%;         margin: 0;       }       svg {         position: absolute;         top: 0;         left: 0;       }       p {         text-align: center;       }     </style>   </head>   <body>     <p>use mouse pan (click , move) / zoom (scrollwheel)</p>   </body>   <script type="text/javascript">       var svg = d3.select("body")         .append("svg")         .attr("width", "100%")         .attr("height", "100%")         .call(d3.zoom().on("zoom", function () {             svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")         }))         .append("g")        svg.append("circle")         .attr("cx", document.body.clientwidth / 2)         .attr("cy", document.body.clientheight / 2)         .attr("r", 50)         .style("fill", "#b8dee6")   </script> </html> 

change this:

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

to this:

.call(d3.zoom().on("zoom", function () {         svg.attr("transform", d3.event.transform) })) 

here fiddle: https://jsfiddle.net/gerardofurtado/c8bga82b/


Comments

Popular posts from this blog

java - Suppress Jboss version details from HTTP error response -

gridview - Yii2 DataPorivider $totalSum for a column -

Sass watch command compiles .scss files before full sftp upload -