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

【问题标题】：d3 zoom and slider issue working togetherd3缩放和滑块问题一起工作
【发布时间】：2017-06-23 20:56:30
【问题描述】：

我有一个 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 缩放一起顺利工作吗？

【问题讨论】：

你见过Brush & Zoom的例子吗？
非常感谢您的帮助

标签： javascript reactjs d3.js slider zooming

【解决方案1】：

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

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

zoom.transform 是诀窍

【讨论】：

【解决方案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"));
             }

【讨论】：