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

Question

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

我现在面临的问题是生成一个转换对象，例如：让 sliderScale = zoomIdentityManual.scale(newK); // newK 是我计算的基于滑块的新比例。

又好了。但是当用户在滑块之后开始通过鼠标缩放时，图形会跳来跳去。我明白为什么。因为来自鼠标的事件与我手动生成的转换对象完全独立。

我找到了这个例子，(http://bl.ocks.org/bollwyvl/871b7c781b92fd0044f5)，主要区别在于 d3 的版本。它是 v3，我正在使用 v4。正如您在滑动函数中看到的那样：

function slided(d) { zoom.scale(d3.select(this).property("value")) .event(svg); }

看起来像 .event(svg)，这就是当前事件发生变化的地方。但是版本4没有这样的方法。

总而言之，有没有什么方法可以使滑块和d3 缩放一起顺利工作？

Answer 1

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

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

zoom.transform 是诀窍

Answer 2

//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"));
             }

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

d3 zoom and slider issue working together

javascript

slider

zooming

d3.js

reactjs