Javascript 在D3中创建缩放功能

我有一个功能，当按下一个按钮（几个按钮代表几个动物类型）时，动物类型SVG会用相应的数据更新。我正在尝试复制

zoom

函数，但在用代码实现它时遇到问题。全球使用的SVG有几种（每种动物类型一种）：

按下其中一个动物按钮时，将调用以下功能

 function update(animal, whatSVG, xAxis, yAxis, color) {   

      const points = whatSVG
        .selectAll("circle")
        .data(data);

      points.enter()
        .append("circle")
        .attr("cx", function(d) {
          return xAxis(d.state);
        })
        .attr("cy", function(d) {
          return yAxis(d.percentage);
        })
        .merge(points)
        .attr("r", 3)
        .attr("cx", function(d) {
          return xAxis(d.decade)
        })
        .attr("cy", function(d) {
          return yAxis(d.count)
        })
        .style("fill", function (d) { return colour(d.animal) } );

      points.exit()
        .attr('r', 0)
        .remove();

    }

问题:

---

我如何实现缩放功能，在缩放（或任何类似功能）时扩展x轴，如上面链接的缩放？

我想您正在寻找问题最后一行中的“笔刷缩放”

下面的源代码来自

十字线允许您选择要展开的区域。如果您跟随链接，则其上方有一个名为“随轴缩放”的图形，但它没有按照您描述的方式进行缩放，它只是移动轴，但不会随轴放大图形内容。也许两者都有用

希望这有帮助

//设置图形的尺寸和边距
var margin={顶部：10，右侧：20，底部：20，左侧：20}，
宽度=500-边距。左侧-边距。右侧，
高度=400-margin.top-margin.bottom；
//将svg对象附加到页面主体
var Svg=d3。选择（“画笔缩放”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//读取数据
d3.csv（“https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv，函数（数据）{
//添加X轴
var x=d3.scaleLinear（）
.domain（[4,8]）
.范围（[0，宽度]）；
var xAxis=Svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加Y轴
变量y=d3.scaleLinear（）
.domain（[0，9]）
.范围（[高度，0]）；
Svg.append（“g”）
.调用（d3.左（y））；
//添加剪贴画：此区域之外的所有内容都不会被绘制。
var clip=Svg.append（“defs”）.append（“Svg:clipPath”）
.attr（“id”、“剪辑”）
.append（“svg:rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“x”，0）
.attr（“y”，0）；
//色阶：给我一个物种名称，我返回一个颜色
var color=d3.scaleOrdinal（）
.domain（[“setosa”、“versicolor”、“virginica”]）
.范围（[“#440154ff”、“#21908dff”、“#fde725ff”]）
//加刷
var brush=d3.brushX（）//使用d3.brush函数添加笔刷功能
.extent（[[0,0]，[width，height]]）//初始化画笔区域：从0,0开始，到width，height结束：这意味着我选择了整个图形区域
.on（“end”，updateChart）//每次笔刷选择更改时，触发“updateChart”函数
//创建散射变量：圆和画笔同时出现的位置
var scatter=Svg.append（'g'）
.attr（“剪辑路径”、“url（#剪辑）”）
//添加圆圈
分散
.selectAll（“圆圈”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“cx”，函数（d）{returnx（d.Sepal_Length）；}）
.attr（“cy”，函数（d）{返回y（d.Petal_长度）；}）
.attr（“r”，8）
.style（“填充”，函数（d）{返回颜色（d.Species）}）
.样式（“不透明度”，0.5）
//加刷子
分散
.附加（“g”）
.attr（“类”、“刷”）
.打电话（刷子）；
//将idleTimeOut设置为null的函数
var idleTimeout
函数idled（）{idleTimeout=null；}
//为给定边界更新图表的函数
函数updateChart（）{
范围=d3.event.selection
//如果没有选择，返回初始坐标。否则，更新X轴域
如果（！范围）{
如果（！idleTimeout）返回idleTimeout=setTimeout（idled，350）；//这允许稍等一会儿
x、 域（[4,8]）
}否则{
x、 域（[x.invert（范围[0]），x.invert（范围[1]））
scatter.select（“.brush”）.call（brush.move，null）//这将在完成选择后立即删除灰色笔刷区域
}
//更新轴和圆位置
xAxis.transition（）.duration（1000）.call（d3.axisBottom（x））
分散
.selectAll（“圆圈”）
.transition（）.持续时间（1000）
.attr（“cx”，函数（d）{returnx（d.Sepal_Length）；}）
.attr（“cy”，函数（d）{返回y（d.Petal_长度）；}）
}
})

也可能感兴趣：是的，我已经读过了，谢谢。虽然这很有帮助，但我一直在努力用全局SVG和按钮打开时更新SVG的功能实现这一点clicked@JimmyNeedles那么，真正的问题是什么？改变来源？（这没有包括在你的问题中）基本上是在我上面所做的函数中制作一个缩放函数（就像你链接的那个）。我已经尝试实现您所链接的那个变量，在必要时更改变量名，但我遇到的问题源于有几个SVGglobally@JimmyNeedles您是否使用d3和一个源成功创建了缩放图（没有尝试多个源）？

 function update(animal, whatSVG, xAxis, yAxis, color) {   

      const points = whatSVG
        .selectAll("circle")
        .data(data);

      points.enter()
        .append("circle")
        .attr("cx", function(d) {
          return xAxis(d.state);
        })
        .attr("cy", function(d) {
          return yAxis(d.percentage);
        })
        .merge(points)
        .attr("r", 3)
        .attr("cx", function(d) {
          return xAxis(d.decade)
        })
        .attr("cy", function(d) {
          return yAxis(d.count)
        })
        .style("fill", function (d) { return colour(d.animal) } );

      points.exit()
        .attr('r', 0)
        .remove();

    }