当d3.behavior.zoom事件以程序方式触发时，如何设置翻译和缩放的初始值？ [英] When a d3.behavior.zoom event is triggered programatically, how do you set inital values for translate and scale?

问题描述

下面的示例中的正方形是具有初始平移和缩放设置的SVG组的一部分。

点击正方形会启动缩放转换。但是，转换设置的初始值不同于我的默认值，这是由于这个转换的刺耳的开始显而易见的。

如何在程序启动的缩放转换中设置翻译和缩放的初始值？

div class =snippetdata-lang =jsdata-hide =false>

  var svg = d3.select（＃main）; svg.append（rect）。attr（{x：0，y：0，height：100，width ：100，fill：red}）svg.append（rect）。attr（{x：100，y：100，height：100，width：100， fill：blue}）svg.append（rect）。attr（{x：0，y：100，height：100，width：100，fill：green }）svg.append（rect）。attr（{x：100，y：0，height：100，width：100，fill：yellow}）var zoom = d3.behavior.zoom（）。on（zoom，function（）{var t = d3.event.translate; var s = d3.event.scale; console.log（s）svg.attr ，translate（+ t [0] +，+ t [1] +）scale（+ s +））。scaleExtent（[1,10]）。scale（1）.translate [0,0]）d3.select（svg）。call（zoom）d3.selectAll（rect）。on（mousedown，function（）{var scale = Math.random translate = [Math.random（）* 200，Math.random（）* 200] zoom.scale（scale）; zoom.translate（translate）; // new transition var T = svg.transition（）。duration（5000）zoom.event（T）;}） 

 < script src =https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js>< / script>< p style =font-weight：bold>当以编程方式触发缩放时，如何设置翻译和缩放的初始值？< / p& ; / p>< svg height =600pxwidth =600px> < g id =maintransform =translate（25,25）scale（0.25）>< / g>< / svg>  

div>

解决方案

要设置缩放的初始值，请尝试这样：

  // Init zoomvar zoom = d3.behavior.zoom（）。on（zoom，function（）{svg.attr（transform，translate （+ d3.event.translate +）+scale（+ d3.event.scale +））;}）; // Get SVG elementvar svg = d3.select（svg）.call缩放）.append（g）; //创建circlesvg.append（circle）.attr（cx，0）.attr（cy，0）.attr（r，5） / Create init valuevar scale = 5; var translate = [50，50]; //设置init值zoom.translate（翻译）; //调用缩放事件vg.call（zoom.event）; //或svg.transition（）。call（zoom.event）;  

 < script src =https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js>< / script>< svg height =100px width =100px>< / svg>  

The squares in the example below are part of an SVG group that has an initial translate and scale set.

Clicking on a square initiates a zoom transition. But the intial values set by the transition are different from my defaults, as made obvious by the jarring start to this transition.

How can I set initial values for translate and scale on a zoom transition that I initiate programatically?

var svg = d3.select("#main");

svg.append("rect").attr({"x":0,"y":0,"height":100,"width":100,"fill":"red"})
svg.append("rect").attr({"x":100,"y":100,"height":100,"width":100,"fill":"blue"})
svg.append("rect").attr({"x":0,"y":100,"height":100,"width":100,"fill":"green"})
svg.append("rect").attr({"x":100,"y":0,"height":100,"width":100,"fill":"yellow"})

var zoom = d3.behavior.zoom().on("zoom",function(){
  var t = d3.event.translate;
  var s = d3.event.scale;
  console.log(s)
  
  svg.attr("transform","translate("+t[0]+","+t[1]+") scale("+s+")")
  
}).scaleExtent([1,10]).scale(1).translate([0,0])

d3.select("svg").call(zoom)

d3.selectAll("rect").on("mousedown",function(){
  var scale = Math.random()*3;
  var translate = [Math.random()*200,Math.random()*200]
  zoom.scale(scale);
  zoom.translate(translate);
  
  //new transition
  var T = svg.transition().duration(5000)
  zoom.event(T);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<p style="font-weight:bold">When a zoom is triggered programatically, how do you set inital values for translate and scale?</p>
<p>Click on one of the squares</p>

<svg height="600px" width="600px">
  <g id="main" transform="translate(25,25) scale(0.25)"></g>
</svg>

解决方案

To set the initial value of the zoom, try something like this:

// Init zoom
var zoom = d3.behavior.zoom().on("zoom", function () {
                svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
            });

// Get SVG element
var svg = d3.select("svg")
  .call(zoom)
  .append("g");

// Create circle
svg.append("circle")
  .attr("cx",0)
  .attr("cy",0)
  .attr("r", 5);

// Create init value
var scale = 5;
var translate = [50, 50];

// Set init value
zoom.scale(scale);
zoom.translate(translate);

// Call zoom event
svg.call(zoom.event); 
// or svg.transition().call(zoom.event);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<svg height="100px" width="100px"></svg>

这篇关于当d3.behavior.zoom事件以程序方式触发时，如何设置翻译和缩放的初始值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！