function clicked([x,y]) {
d3.event.stopPropagation();
svg.transition().duration(1000).call(
zoom.transform,
d3.zoomIdentity.translate(width / 2, height / 2).scale(2).translate(-x, -y),
d3.mouse(svg.node())
我们模拟一个点击一个圆，位置在(10,10)，看看它是如何被放置到中间去的：
我们之前说了d3.zoomIdentity表示当前在[0,0]，那么d3.zoomIdentity.translate(width / 2, height / 2)表示当前在svg中间，然后再放大2被(scale(2))，那么此时就是在svg的中间放大的。
然后再移动[-10,-10]，注意此时的移动是算上了当前的缩放的，因为当前是放大2倍的，因此移动[-10,-10]刚好可以将圆心放入中间。
d3.transfrom第三个参数
上面click圆的例子中，我们看到还有一个参数d3.mouse(svg.node())，它是干嘛的呢？它是用来设置弹性动画的圆心位置：
我们可以看到这个点，从起点到终点，中间划过了一个完美的曲线，为啥呢？因为我设置的弹性点为[0,0]:
d3.js中zoom弹性点(二维码)
弹性点就是让你在起点和终点之间保持一直曲线变换的关系，大致如下：
invert,scaleBy,d3.zoomTransform等方法
invert表示形变的反应用，具体参见d3.js中apply,invert,rescaleX等方法。
scaleBy就是每次缩放多少，例如scaleBy(2)，那么每次放大两倍数，与之相仿的就是scaleBy(.5)，每次缩小两倍。
d3.zoomTransform就是获取一个节点当前的变形程度(包括位移和缩放)。
d3.js中的zoom缩放2019-10-24阅读721今日6d3.js中的缩放(zoom)是一个很重要的概念，今天来看看zoom的常见用法：d3.js中zoom常见用法(二维码)scaleExtent先用d3.zoom初始化一个zoom，然后用scaleExtent去设置它的缩小，放大的范围：constzoom=d3.zoom() .scaleExtent([1,40]) .on("zoom",zoomed);上面设置的是最小为原始大小，最大可以放...
d3变焦
平移和缩放是流行的交互技术，通过限制视图，使用户可以将注意力集中在感兴趣的区域上。 由于直接操作，因此很容易学习：单击并拖动以平移（平移），旋转轮子以缩放（缩放），或使用触摸。 平移和缩放在基于Web的地图中广泛使用，但也可以与时间序列和散点图等可视化一起使用。
d3-zoom实现的缩放行为是一种方便但灵活的抽象，用于启用对平移和缩放。 它处理各种令人惊奇的和浏览器怪癖。 缩放行为与DOM无关，因此可以将其与SVG，HTML或Canvas一起使用。
缩放行为也设计为与和； 请参见和 。 您还可以限制使用变焦和使用平移 。
缩放行为可以与其他行为结合使用，例如用于拖动）和用于聚焦+上下文）。
缩放行为可以使用zoom .transform进行编程控制，从而允许您实现用户界面控件来驱动显示或通过数据进行动画导览。 平滑的缩放过渡基于Jarke J. van Wijk和Wim
"d3": "^7.0.0",
做这块功能的时候绞尽脑汁想了半天，觉得这块功能实现挺复杂的，在网上找了很多方式，结果由于d3版本的原因，好多没有生效，后来看了一晚上官方文档，以及别人的使用，最终给实现出来了
const svg = d3
.select("#container5")
.append("svg")
.attr("id", "svg")
.attr("width", 640)
zoom从字面上看是缩放的意思，但是d3中的zoom除了能缩放，还能平移，因为这两个操作总是不分家的
首先，整个显示区域中并不是所有的元素都要缩放和平移的，比如坐标轴、背景，这些都是不需要缩放和平移的，所以在设定zoom元素时，需要将其排除。最好的办法是使用svg的g标签对图形元素进行分组，把需要缩放的放在一个g标签里，其他的可以放在一个g标签里，也可以分开放。
在本示例代码中svgGraph...
.attr("width", "100%")
.attr("height", "100%")
.call(d3.zoom().on("zoom", function () {
svg.attr("transform", d3.event.transform)
.append("g")
使用d3.js的时候，可能会需要对生成svg对象进行平移，旋转，缩放等操作
可以使用矩阵变换来进行坐标系下的转化，但是矩阵运算相对复杂。d3提供了相应的svg变换接口。
translate() , scale() , rotate() , skewX() , and skewY()
一、translate()
2个参数，第一个参数是向右平移的像素，第二个是向下
#How 在 D3.js 中创建工具提示名称： Maria Cristina Di Termine类别： D3.js 框架
日期： 2015 年 5 月
工具提示是当鼠标悬停在视图的特定元素上时会出现的一条信息。 有些人用不同的名称来称呼它，例如“悬停框”、“信息提示”或“提示”，但可以肯定的是，它是显示信息的有用工具，也可以成为我们项目的时尚元素。 我想向您展示我如何在 D3.js 项目中制作工具提示。 首先，我创建了一个关于一个简单参数的通用条形图：巧克力。 我有两个值：牛奶的百分比（Y）和可可的百分比（X）。 在我的图表最后，我会得到 4 种不同口味的巧克力棒！ 我需要做的是使用名称指定哪种巧克力棒，例如“lightchoco”、“milkchoco”等。我将在我的工具提示中显示这些巧克力名称，可能还会使用额外的图片。
##工具提示
现在我们有了条形图，我们可以创建工具提示。 为此
先奉上有问题的代码
//在页面
中添加svg 支持拖拽和
缩放
var svg =
d3.select("#body").append("svg").attr("width", 1000).attr("height", 1000)
.call(
d3.
zoom().scaleExtent([1, 3]).on("
zoom",
function redraw(event: any) {
svg.attr("transform", event.transform);
如果你想要设置d3.zoom()缩放的默认值，可以使用d3.zoomIdentity对象来表示。d3.zoomIdentity对象代表一个单位缩放矩阵，即不进行任何缩放或平移操作。
你可以通过以下方式设置d3.zoom()的默认缩放值：
```javascript
var zoom = d3.zoom()
.scaleExtent([0.5, 2]) // 缩放范围
.translateExtent([[-width, -height], [width*2, height*2]]) // 平移范围
.on("zoom", zoomed)
.on("end", zoomEnd);
zoom.transform(svg, d3.zoomIdentity.scale(1)); // 设置默认缩放值为1
这里，我们使用d3.zoomIdentity.scale(1)方法来设置默认缩放值为1。注意，需要在调用zoom.transform()方法之前设置默认值。
