僅允許使用按鈕縮放，允許使用滑鼠拖動平移

[更新為現在使用拖動 - 但拖動功能無法 100% 正確，因此仍需要幫助]

我正在嘗試使用 d3 以特定方式縮放和平移 svg。我希望用戶必須使用放大/縮小按鈕進行縮放，但隨后能夠通過滑鼠拖動進行平移。我還希望平移僅限于邊界。這是同樣的方式，紐約時報有它建立在他們的covid地圖- https://www.nytimes.com/interactive/2021/us/covid-cases.html（滾動熱點圖）

我在邊界內進行縮放，并且通過注釋掉.call(zoom). 我只是使用按鈕進行縮放并使用.call(zoom.transform, initialTransform). 我正在呼叫拖動來控制平移，但它跳躍了一點并且不是我想要的流暢互動。它似乎也可能影響縮放。

非常感謝任何指示或幫助。

var width = 960,
      height = 500;

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .style("background-color", randomColor),
      g = svg.append("g");

    var zoom = d3.zoom()
      .scaleExtent([1, 10])
      .on("zoom", zoomed);

    let zoomLevel,
      tx,
      ty

    var drag = d3.drag()
      .on("drag", dragged);

    var initialTransform = d3.zoomIdentity
      .translate(0, 0)
      .scale(1)

    d3.select('#zoom-in').on('click', function () {
      zoom.scaleBy(svg.transition().duration(50), 1.3);
    });

    d3.select('#zoom-out').on('click', function () {
      zoom.scaleBy(svg.transition().duration(50), 1 / 1.3);
    });

    function dragged(event, d) {

      var e = event

      var dx = e.subject.x,
        dy = e.subject.y,
        x = e.x,
        y = e.y,
        translate = [width / 2 - zoomLevel * x, height / 2 - zoomLevel * y];

      var transform = d3.zoomIdentity
        .translate(translate[0], translate[1])
        .scale(zoomLevel);

      svg.transition()
        .duration(50)
        .call(zoom.transform, transform);

    }



    function zoomed(event) {

      zoomLevel = event.transform.k

      var e = event

      tx = Math.min(0, Math.max(e.transform.x, width - width * e.transform.k)),
        ty = Math.min(0, Math.max(e.transform.y, height - height * e.transform.k));

      g.attr("transform", [
        "translate("   [tx, ty]   ")",
        "scale("   e.transform.k   ")"
      ].join(" "));

    }

    svg
      //.call(zoom) // uncomment to disable free zooming. but then can't pan ?
      .call(zoom.transform, initialTransform)
      .call(drag) // use this to pan

    // random circles to fill svg
    var circle = g.selectAll("circle")
      .data(d3.range(300).map(function (i) {
        return {
          x: Math.random() * width,
          y: Math.random() * height,
          r: .01   Math.random() * 50,
          color: randomColor()
        };
      }).sort(function (a, b) {
        return d3.descending(a.r, b.r);
      }))
      .enter()
      .append("circle")
      .attr("fill", function (d) { return d.color; })
      .attr("cx", function (d) { return d.x; })
      .attr("cy", function (d) { return d.y; })
      .attr("r", function (d) { return d.r; });

    function randomColor() {
      return "hsl("   ~~(60   Math.random() * 180)   ",80%,60%)";
    }

<script src="http://d3js.org/d3.v6.min.js"></script>
<div id="zoom-buttons">
  <button id="zoom-in"> </button>
  <button id="zoom-out">-</button>
</div>

uj5u.com熱心網友回復：

只需禁用滾輪縮放（并拖放）：

svg.call(zoom)
    .on("wheel.zoom", null);

這是帶有該更改的代碼：

顯示代碼片段

var width = 960,
  height = 500;

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .style("background-color", randomColor),
  g = svg.append("g");

var zoom = d3.zoom()
  .scaleExtent([1, 10])
  .on("zoom", zoomed);

d3.select('#zoom-in').on('click', function() {
  zoom.scaleBy(svg.transition().duration(50), 1.3);
});

d3.select('#zoom-out').on('click', function() {
  zoom.scaleBy(svg.transition().duration(50), 1 / 1.3);
});

function zoomed(event) {

  zoomLevel = event.transform.k

  var e = event

  tx = Math.min(0, Math.max(e.transform.x, width - width * e.transform.k)),
    ty = Math.min(0, Math.max(e.transform.y, height - height * e.transform.k));

  g.attr("transform", [
    "translate("   [tx, ty]   ")",
    "scale("   e.transform.k   ")"
  ].join(" "));

}

svg.call(zoom)
  .on("wheel.zoom", null);

// random circles to fill svg
var circle = g.selectAll("circle")
  .data(d3.range(300).map(function(i) {
    return {
      x: Math.random() * width,
      y: Math.random() * height,
      r: .01   Math.random() * 50,
      color: randomColor()
    };
  }).sort(function(a, b) {
    return d3.descending(a.r, b.r);
  }))
  .enter()
  .append("circle")
  .attr("fill", function(d) {
    return d.color;
  })
  .attr("cx", function(d) {
    return d.x;
  })
  .attr("cy", function(d) {
    return d.y;
  })
  .attr("r", function(d) {
    return d.r;
  });

function randomColor() {
  return "hsl("   ~~(60   Math.random() * 180)   ",80%,60%)";
}

<script src="http://d3js.org/d3.v6.min.js"></script>
<div id="zoom-buttons">
  <button id="zoom-in"> </button>
  <button id="zoom-out">-</button>
</div>

標籤：

上一篇：Task 使用詳細[基礎操作，異步原則，異步函式，異步模式]

下一篇：未捕獲（承諾）TypeError：無法讀取未定義的屬性（讀取“then”）