当前位置：文江博客话题详情

【d3.v4】怎么实现通过外部按钮触发svg的缩放

发布于 2022-09-04 10:22:01 字数 384 浏览 13 评论 0

var svg = d3.select("#svg");
svg.call(
   d3.zoom().scaleExtent([0.5, 2]).on("zoom", zoomed) 
);
var zoomed = function(){
   d3.select(this).selectAll("g").attr("transform",   d3.event.transform);
}

外部按钮

d3.select("#button").on("click", function(){
    d3.zoom().scaleBy(svg, 1.1);
})

现在点击按钮，没有效果，没有触发zoomed方法，这应该怎么解决？

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（3）

握住我的手 2022-09-11 10:22:01

let zoom = d3.zoom();
svg.call(zoom);

当调用上面代码时，d3应该会监听svg，把svg的缩放和平移的相关值放在zoom的transform的变量里。
运行一下面的demo，看看控制台的输出应该就能明白了。

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
      <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
      <svg width="300" height="300"></svg>
      <br/>
      <button id="reset">Reset zoom</button>
      <button id="zoom">Zoom</button>
    <button id="translateX">Translate</button>
      <script>
    let svg = d3.select("svg"),
          width = +svg.attr("width"),
          height = +svg.attr("height");
          
    let g = svg.append("g");
    
    g.append("text")
          .attr("x", width/2)
          .attr("y", height/2)
          .text("Text");
    
    let zoom = d3.zoom()
          .on("zoom", function(){ // zoom事件
              console.log(`Zoom: ${d3.zoomTransform(svg.node())}`);
              console.log(`D3: : ${d3.event.transform}`);
              g.attr("transform", d3.zoomTransform(svg.node()));
          });

    svg.call(zoom);

    d3.select("#reset")
          .on("click", function(d){
            svg.call(zoom.transform, d3.zoomIdentity);
        });
    d3.select("#zoom")
        .on("click", function(d) {
            zoom.scaleBy(svg, 0.9); // 执行该方法后 会触发zoom事件
            let tran = d3.zoomTransform(svg.node());
            // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`); // 您可以手动地更新
            console.log(tran);
        });
    d3.select("#translateX")
        .on("click", function(d) {
            zoom.translateBy(svg, 10, 0);
            let tran = d3.zoomTransform(svg.node());
            // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);
            console.log(tran);
        });
      </script>
</body>

</html>

掩于岁月 2022-09-11 10:22:01

function zoomIn(){

    var t = d3.zoomTransform(zoomDom.node());
    zoom.transform(zoomDom,t.scale(t.k+1));
}

指定需要缩放的元素 , 并且先获得上一次缩放的大小

人│生佛魔见 2022-09-11 10:22:01

这个效果具体怎么实现，我试了没有成功

~没有更多了~

关于作者

情泪▽动烟

暂无简介

0 文章

0 评论

25 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文