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

女爷i 2022-09-10 13:15 127阅读 0赞

缩放区域使用的 `zoom` 这个api

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

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

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

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

这里缩放的其实是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>

[e932e0a8116a47b99b5b976d6df351ee.gif_pic_center]: /images/20220829/68115dded5af4255941dfc3702789260.png