个人中心
gpt4 book ai didi

d3.js - d3缩放和平移升级到版本4

转载 作者：行者123 更新时间：2023-12-03 13:12:47 25 4
gpt4 key购买 nike

感谢您提供帮助以更新下面的代码以在版本4中工作。我已将zoom.behaviour更改为d3.zoom，但我不清楚所需的其他更改。看起来比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 the mouse to pan (click and 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>

最佳答案

更改此:

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

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

这是 fiddle : https://jsfiddle.net/gerardofurtado/c8bga82b/

关于d3.js - d3缩放和平移升级到版本4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38459765/

25 4 0
文章推荐： elixir - 有什么方法可以在Phoenix中定义自定义路线？
文章推荐： reactjs - react native 0.31 : Could not get BatchedBridge Error
文章推荐： reactjs - axios未定义
文章推荐： tensorflow - 单 tensorflow sess.run() 中的多步梯度下降
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com