一、d3的含义

d3.js 是一个可以基于数据来操作文档的 JavaScript 库，可以帮你使用HTML CSS JS SVG Canvas 来展示数据，它结合强大的视图组件来驱动Dom操作.
d3引入的使用

  <script   src="https://d3js.org/d3.v5.min.js"></script>

也可以单独使用某个模块，比如单独使用d3-selection

<script src="https://d3js.org/d3-selection.v1.js"></script>  

可以模块化引入

import * as d3 from 'd3';

二、d3-selection(选择器)

Selections 允许强大的数据驱动文档对象模型(DOM)：设置attributes,styles,HTML 或 text 内容，选择集的方法通常选择当前的选择当前的选择集或者新的选择集，因此允许进行链式调用。

d3.selectAll("p")
      .attr("class","fd-tag")
      .style("color","red");

等价于：

 const p = d3.selectAll("p");
 p.attr("class","fd-tag");
 p.style("color","red");

d3.select('selector')

选中符合条件的第一个元素，选择条件为 selector 字符串。如果没有元素被选中则返回空选择集，如果选择器有多个，那就返回匹配第一个选择集

d3.selectAll('selector')

选择所有与制定的selector匹配的元素，返回一个数组。如果没有元素被选中，则返回的空的选择集。

三、d3-zoom（缩放）

视图移动以及缩放是一种流行的交互技术 缩放行为通过d3-zoom模块来实现，缩放本身与DOM元素无关，可以用于SVG，HTML 或者 Canvas。

引入d3-zoom

  <script  src="htts://d3js.org.js/d3-zoom.v1.min.js"></script>
  或者
  npm install d3-zoom

d3.zoom()

创建一个新的缩放行为,并返回该行为。zoom既是一个对象又是一个函数，通过selection.call()来应用到元素本身上

selection.call(d3.zoom().on( "zoom" , zoomed))

事件绑定 .zoom 双击禁用缩放 以及 禁止滚动齿轮缩放

  selection.on("dblclick.zoom",null)
  selection.on("wheel.zoom",null)

selection.call( d3.zoom()
         // extent 即将当前视口范围设置为指定的数组[[x0,y0],[x1,y1]] 
        // x0,y0为视口的左上角，x1,y1为视口的右下角
        .extent([0,0],["画布的宽度","画布的高度"])
        // 缩放的范围[k0,k1]     k0 为缩放的最小范围，  k1为缩放的最大范围
        .scaleExtent([0.4,1])    // 缩放范围
        .on("zoom",()=>{
            // zoom事件跟缩放的回调函数   d3.event.transform 
            selection.attr( "transform" , d3.event.transform )
    })
 )