d3成神之路(七):缩放区域的使用

举报
拿我格子衫来 发表于 2022/03/17 22:45:50 2022/03/17
【摘要】 缩放区域使用的 zoom 这个api https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#_zoom 使用d3.zoom() 创建一个缩放区域,配置...

缩放区域使用的 zoom 这个api

https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#_zoom

使用d3.zoom() 创建一个缩放区域,配置各种参数,比如 缩放比例,绑定事件处理,设置映射尺寸。
最后再使用 svg.call(zoom) 应用于svg
在这里插入图片描述

使用d3.randomNormal() 来产生随机数

    const randomX = d3.randomNormal(width / 2, 80);
    const randomY = d3.randomNormal(height / 2, 80);
    const data = Array.from({ length: 2000 }, () => [randomX(), randomY()]);

  
 
  • 1
  • 2
  • 3

这里缩放的其实是svg中子元素 circle 的 transform。 位移circle在svg中的 x与y。

<!DOCTYPE html>
<html>

<head>
  <title>先做一个柱状图</title>
</head>

<body style="display: flex; justify-content: center;align-items: center;">
  <svg id="main" width="800" height="800" viewbox="0, 0, 800, 800"; style="border: 2px solid red;"></svg>
  <script src="./js/d3.min.js"></script>
  <script>
    const svg = d3.select("#main")
    const width = svg.attr('width')
    const height = svg.attr('height')
    const randomX = d3.randomNormal(width / 2, 80);
    const randomY = d3.randomNormal(height / 2, 80);
    const data = Array.from({ length: 2000 }, () => [randomX(), randomY()]);

    const circle = svg.selectAll("circle")
      .data(data)
      .join("circle")
      .attr("transform", d => `translate(${d})`)
      .attr("r", 1.5);


    function zoomed({transform}) {
      circle.attr("transform", d => `translate(${transform.apply(d)})`);
    }

    const zoom = d3.zoom()
                   .extent([[0,0], [width, height]])
                   .scaleExtent([1,8])
                   .on("zoom", zoomed)

    svg.call(zoom)

  </script>
</body>

</html>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

文章来源: fizzz.blog.csdn.net,作者:拿我格子衫来,版权归原作者所有,如需转载,请联系作者。

原文链接:fizzz.blog.csdn.net/article/details/120182875

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。