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

女爷i 2022-09-10 13:15 115阅读 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

发表评论取消回复

表情：

评论列表（有 0 条评论，115人围观）

还没有评论，来说两句吧...

相关阅读

相关 ECharts 区域缩放组件使用详解

dataZoom 说明：区域缩放组件，用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。 1 toolbox.show 说明：是

矫情吗；*/ 2023年10月05日 08:34/ 0 赞/ 9 阅读

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

缩放区域使用的 `zoom` 这个api https://github.com/d3/d3-zoom/blob/v3.0.0/README.md\\_zoom 使用d3.z

女爷i/ 2022年09月10日 13:15/ 0 赞/ 116 阅读

相关 d3成神之路(五)：扇形图，饼图

制作扇形其实也是使用 svg的 path 这个属性，重要的是计算各个扇形区域的点，与弧度效果图 ![在这里插入图片描述][watermark_type_ZHJva

Love The Way You Lie/ 2022年09月10日 07:11/ 0 赞/ 159 阅读

相关 d3成神之路(四)：D3API思维导图

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ou_5oiR5qC85

叁歲伎倆/ 2022年09月10日 02:18/ 0 赞/ 135 阅读

相关 d3成神之路（三）：折线图

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

雨点打透心脏的1/2处/ 2022年09月09日 13:59/ 0 赞/ 114 阅读

相关 d3成神之路，学习计划

基础图表开发先开发一条基础版本的图表，如柱状图，折线图，饼图，散点图，树图，一图多例基于基础版本的图表，开发多个样例，参照[echarts的示例中心][ec

青旅半醒/ 2022年09月09日 13:48/ 0 赞/ 108 阅读

相关 d3成神之路(二)：第二个柱状图

核心代码是理解 `data(data)` `join("rect")` `.attr("height", d => yScale(0) - yScale(d.val

喜欢ヅ旅行/ 2022年09月09日 11:51/ 0 赞/ 103 阅读

相关 unity3d粒子缩放

using UnityEngine; using System.Collections; using UnityEditor; pub

傷城~/ 2022年05月27日 11:45/ 0 赞/ 187 阅读

相关 java 成神之路

摘自：纯洁的微笑一、基础篇 JVM JVM内存结构堆、栈、方法区、直接内存、堆和栈区别 Java内存模型内存可见性、重排序、顺序一致性、volati

喜欢ヅ旅行/ 2022年05月13日 21:04/ 0 赞/ 222 阅读

相关 JAVA成神之路

0 1 面向对象 → 什么是面向对象面向对象、面向过程面向对象的三大基本特征和五大基本原则 → 平台无关性 Java 如何实现的平台无关 J

心已赠人/ 2022年01月29日 07:15/ 0 赞/ 898 阅读