D3.js v4 - 如何使用默认的wheelmouse缩放行为添加缩放按钮 [英] D3.js v4 - how to add zoom button with the default wheelmouse zoom behavior

问题描述

这个问题涵盖了与此问题完全相同的主题：

• D3.js - 如何使用默认的wheelmouse缩放行为添加缩放按钮

我也试图实现它在这个链接中的代码 http://bl.ocks.org/linssen/7352810 。

我在这里问的原因是因为解决方案是使用D3.js的第3版给出的，但没有一个能解决我的问题。
这是我目前关于缩放的实现。

  let translateVar = [0,0]; 
让scaleVar = 1; 
 
 function create_pan_zoomable_svg（）{
 let svg = d3.select（body）
 .append（svg）
 .attr（width， 100％）
 .attr（身高，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）}）; 
 
返回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 +'）'）; 
}）; 
  

我发现这篇文章 d3.js V4按钮缩放实现表现得很奇怪，认为它可以解决我的问题，但是将代码调整为我的，结果证明基于wheelmouse的缩放不再工作，只是按钮。这是来自此帖子的改编代码。

  function create_pan_zoomable_svg（）{
 let zoom = d3.zoom（） .on（缩放，缩放）; 
 
让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）; 
 }）; 
 
返回svg; 
} 
 
 function zoomed（）{
 svg.attr（transform，d3.event.transform）; 
} 
  

另一个问题是如果我要把在调用 zoom 之后追加（g）两个基于缩放都可以工作，但他们不会跟踪翻译。

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

非常感谢任何帮助。

解决方案

按照评论并阅读命名var svg和创建 svg 元素的混淆。

< pre class =snippet-code-js lang-js prettyprint-override> let zoom = d3.zoom（）。on（zoom，zoom）; let svg = d3.select（svg ）。attr（width，100％）。attr（height，100％）。style（background-color，#eeeeee）。call（zoom）.on（dblclick 。放大， null）;设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 =960height =500>< / svg>< script src =https://d3js.org/d3.v4.min.js >< / script>< button id =zoom_in> +< / button>< button id =zoom_out>  - < / button>  

This question covers exactly the same topic as this one already asked and answered:

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

I have also tried to implemented the code that it is in this link http://bl.ocks.org/linssen/7352810.

The reason I am asking here is because the solutions are given using version 3 of D3.js and none of those solve my problem. This is my current implementation regarding the zooming.

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 + ')');
    });

I found this post d3.js V4 Button Zoom Implementation acting weird, thinking that it might solve my problem, but adapting the code to mine, turns out that the wheelmouse-based zoom is no longer working and just the buttons. This is the adapted code from such 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);
}

Another problem is that if I were to put the append("g") after calling the zoom both based zooms will work but they will not keep track of the translation.

Please visit for diagnosing the problem: https://jsfiddle.net/vxhuzyp2/5/

Any help would be much appreciated.

解决方案

Follow the comment and read through the confusion of naming a var svg and and creating an svg element.

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 - 如何使用默认的wheelmouse缩放行为添加缩放按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！