Javascript d3缩放和滑块问题一起工作

我有一个SVG图形，它与d3 zoom完美配合。但是，要求添加滑块，并使用滑块和鼠标滚轮控制缩放

我现在面临的问题是生成变换对象，例如： let sliderScale=zoomIdentityManual.scale（newK）； //newK是基于我计算的滑块的新比例

又好了。但是，当用户在滑块之后开始用鼠标缩放时，图形会跳转。我知道为什么。因为来自鼠标的事件与我手动生成的变换对象完全不同

我发现了这个例子，（），主要的区别是d3的版本。它是v3，我正在使用v4。正如您在滑动功能中所看到的：

滑动的函数（d）{ 缩放比例（d3.选择（此）.property（“值”）） .事件（svg）； }

看起来它确实执行了

.event（svg）

，这就是当前事件发生更改的地方。但是版本4没有这样的方法

---

总之，有什么方法可以使滑块和d3变焦平滑地一起工作吗

我的问题是滑块移动时没有正确缩放。我直接调用函数，但我需要在svg上调用缩放操作，如：

  svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
      .scale(width / (s[1] - s[0]))
      .translate(-s[0], 0));

zoom.transform是诀窍

//css
//css

      <style>

      .dot circle {
        fill: lightsteelblue;
        stroke: steelblue;
        stroke-width: 1.5px;
      }

      .dot circle.dragging {
        fill: red;
        stroke: brown;
      }

      .axis line {
        fill: none;
        stroke: #ddd;
        shape-rendering: crispEdges;
        vector-effect: non-scaling-stroke;
      }

      </style>


//HTML
 <p class="panzoom"></p>
 <svg width="100%" height="410"></svg>


// js code
    var svg = d3.select("svg"),
                 width = +svg.attr("width"),
                 height = +svg.attr("height");
             var newTag = svg.append("g");

    var zoom = d3.zoom()
                 .scaleExtent([.3, 2])
                 .on("zoom", zoomed);

             var slider = d3.select(".panzoom").append("input")
               .datum({})
               .attr("type", "range")
               // .attr("value", zoom.scaleExtent()[0])
               .attr("min", zoom.scaleExtent()[0])
               .attr("max", zoom.scaleExtent()[1])
               .attr("step", (zoom.scaleExtent()[1] - zoom.scaleExtent()[0]) / 100)
               .on("input", slided);

             function zoomed() {
               const currentTransform = d3.event.transform;
                         newTag.attr("transform", currentTransform);
                         slider.property("value", currentTransform.k);
             }

             function slided(d){
                zoom.scaleTo(newTag, d3.select(this).property("value"));
             }

点圆{
填充物：淡蓝色；
笔画：钢蓝；
笔划宽度：1.5px；
}
.点圆.拖动{
填充物：红色；
笔画：棕色；
}
.轴线{
填充：无；
行程：#ddd；
形状渲染：边缘清晰；
矢量效果：非缩放笔划；
}
//HTML

//js代码
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
var newTag=svg.append（“g”）；
var zoom=d3.zoom（）
.scaleExtent（[3,2]）
。打开（“缩放”，缩放）；
变量滑块=d3。选择（“.panzoom”）。追加（“输入”）
.datum（{}）
.attr（“类型”、“范围”）
//.attr（“值”，zoom.scaleExtent（）[0]）
.attr（“min”，zoom.scaleExtent（）[0]）
.attr（“max”，zoom.scaleExtent（）[1]）
.attr（“步骤”，（zoom.scaleExtent（）[1]-zoom.scaleExtent（）[0]）/100）
.打开（“输入”，滑动）；
函数缩放（）{
const currentTransform=d3.event.transform；
newTag.attr（“变换”，currentTransform）；
属性（“值”，currentTransform.k）；
}
函数滑动（d）{
缩放（newTag，d3.select（this.property）（“value”）；
}

您看到这个示例了吗？非常感谢您的帮助