D3.js v4 - 如何添加具有默认滚轮鼠标缩放行为的缩放按钮

Question

这个问题涵盖的主题与已经提出和回答的这个问题完全相同：

D3.js - how to add zoom button with the default wheelmouse zoom behavior

我也尝试实现了 link http://bl.ocks.org/linssen/7352810 中的代码。

我在这里问的原因是因为解决方案是使用 D3.js 的版本 3 给出的，其中 none 解决了我的问题。这是我目前关于缩放的实现。

let translateVar = [0,0];
let scaleVar = 1;

function create_pan_zoomable_svg() {
    let svg = d3.select("body")
        .append("svg")
        .attr("width", "100%")
        .attr("height", "100%")
        .style("background-color", "#eeeeee")
        .call(_zoom).on("dblclick.zoom", null)
        .append("g");
    d3.select("#zoom_in").on('click', function() { _zoom.scaleBy(svg, 2)});
    d3.select("#zoom_out").on('click', function() { _zoom.scaleBy(svg, 0.5)});

    return svg;
}

var _zoom = d3.zoom()
    .on("zoom", function() {
        translateVar[0] = d3.event.transform.x;
        translateVar[1] = d3.event.transform.y;
        scaleVar = d3.event.transform.k;
        svg.attr('transform', 'translate(' + translateVar[0] + ',' + translateVar[1] + ') scale(' + scaleVar + ')');
    });

我发现了这个 post ，认为它可能会解决我的问题，但是根据我的情况调整代码，结果发现基于滚轮鼠标的缩放不再有效，只有按钮.这是改编自 post.

的代码

function create_pan_zoomable_svg() {
    let zoom = d3.zoom().on("zoom", zoomed);

    let svg = d3.select("body")
        .append("svg")
        .attr("width", "100%")
        .attr("height", "100%")
        .style("background-color", "#eeeeee")
        .append("g").call(zoom).on("dblclick.zoom", null);

    d3.select("#zoom_in").on("click", function() {
        zoom.scaleBy(svg.transition().duration(750), 1.2);
    });
    d3.select("#zoom_out").on("click", function() {
        zoom.scaleBy(svg.transition().duration(750), 0.8);
    });

    return svg;
}

function zoomed() {
    svg.attr("transform", d3.event.transform);
}

另一个问题是，如果我在调用 zoom 之后放置 append("g")，两个基于缩放的缩放都可以工作，但它们不会跟踪翻译。

诊断问题请访问：https://jsfiddle.net/vxhuzyp2/5/

如有任何帮助，我们将不胜感激。

Answer 1

关注评论并通读命名 var svg 和创建 svg 元素的困惑。

let zoom = d3.zoom().on("zoom", zoomed);

let svg = d3.select("svg")
  .attr("width", "100%")
  .attr("height", "100%")
  .style("background-color", "#eeeeee")
  .call(zoom)
  .on("dblclick.zoom", null);
let g = svg.append("g");
//d3.selectAll("#zoom-section i").on("click", zoomClick);
g.append("circle").attr("r", 50).attr("fill", "red");
d3.select("#zoom_in").on("click", function() {
  zoom.scaleBy(svg.transition().duration(750), 1.2);
});
d3.select("#zoom_out").on("click", function() {
  zoom.scaleBy(svg.transition().duration(750), 0.8);
});

function zoomed() {
    g.attr("transform", d3.event.transform);
}

<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>

<button id="zoom_in">+</button>
<button id="zoom_out">-</button>

D3.js v4 - 如何添加具有默认滚轮鼠标缩放行为的缩放按钮

D3.js v4 - how to add zoom button with the default wheelmouse zoom behavior

javascript

transformation

graph

zooming

d3.js