Question

我在D3中有一个时间轴，高度修改了拖动/滚动和平移/缩放。缩放回调使用由缩放行为生成的d3.event.transform对象。

我需要添加一个使用现有回调的程序化缩放。我曾经尝试并尝试这样做，但是我还没有使它起作用，因此重用现有结构会更加容易和快捷。

因此，输入是一个新的域，即[new Date(1800,0), new Date(2000,0)]，而输出应该是一个新的d3.event.transform，其行为与例如mousewheel事件的输出完全一样。

一些示例现有代码：

this.xScale = d3.scaleTime()
  .domain(this.initialDateRange)
  .range([0, this.w]);

this.xScaleShadow = d3.scaleTime()
  .domain(this.xScale.domain())
  .range([0, this.w]);

this.zoomBehavior = d3.zoom()
  .extent([[0, 0], [this.w, this.h]])
  .on('zoom', this.zoomHandler.bind(this));

this.timelineSVG
  .call(zoomBehavior);

... 

function zoomHandler(transformEvent) {
  this.xScale.domain(transformEvent.rescaleX(this.xScaleShadow).domain());

  // update UI
  this.timeAxis.transformHandler(transformEvent);
  this.updateGraphics();
}

示例目标：

function zoomTo(extents){
  var newTransform = ?????(extents);

  zoomHandler(newTransform);
}

（请不要标记为this question的重复项，我的问题是更具体的，涉及的是较新的d3 API）

Answer 1

假设我了解问题所在：

仅根据您的问题的标题，我们就可以使用zoom.transform在d3v4和d3v5中以编程方式分配缩放变换并触发缩放事件，如下所示：

selection.call(zoom.transform, newTransform)

其中选择是调用缩放的选择，zoom是缩放行为对象的名称，zoom.transform是缩放对象的功能，该函数设置应用于选择（并发出开始，缩放和结束事件），而newTransform是作为参数提供给zoom.transform的转换（有关详细信息，请参见docs中的selection.call()有关此模式的更多信息，但与zoom.transform(selection,newTransform)相同。

下面，您可以通过单击按钮在矩形上设置缩放比例：该缩放比例不是在空间上而是以颜色来应用，但是在语义或几何上缩放数据时，原理是相同的。

var scale = d3.scaleSqrt()
  .range(["red","blue","yellow"])
  .domain([1,40,1600]);
  
var zoom = d3.zoom()
  .on("zoom", zoomed)
  .scaleExtent([1,1600])
    

var rect = d3.select("svg")
  .append("rect")
  .attr("width", 400)
  .attr("height", 200)
  .attr("fill","red")
  .call(zoom);
  
// Call zoom.transform initially to trigger zoom (otherwise current zoom isn't shown to start). 
rect.call(zoom.transform, d3.zoomIdentity);

// Call zoom.transform to set k to 100 on button push:
d3.select("button").on("click", function() {
  var newTransform = d3.zoomIdentity.scale(100);
  rect.call(zoom.transform, newTransform);
})

// Zoom function:
function zoomed(){
  var k = d3.event.transform.k;
  rect.attr("fill", scale(k));
  d3.select("#currentZoom").text(k);
}

rect {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<button>Trigger Zoom</button> <br />
<span> Current Zoom: </span><span id="currentZoom"></span><br />
<svg></svg>

如果对缩放比例应用缩放变换，则需要根据新范围重新缩放。这类似于现有的画笔和缩放示例，但我将仅使用比例尺和轴在裸露的骨骼示例中进行分解（您也可以使用鼠标在比例尺上进行缩放）：

var width = 400;
var height = 200;

var svg = d3.select("svg")
  .attr("width",width)
  .attr("height",height);
  
// The scale used to display the axis.
var scale = d3.scaleLinear()
  .range([0,width])
  .domain([0,100]);
  
// The reference scale
var shadowScale = scale.copy();

var axis = d3.axisBottom()
  .scale(scale);
  
var g = svg.append("g")
  .attr("transform","translate(0,50)")
  .call(axis);
  
// Standard zoom behavior:
var zoom = d3.zoom()
  .scaleExtent([1,10])
  .translateExtent([[0, 0], [width, height]])
  .on("zoom", zoomed);
 
// Rect to interface with mouse for zoom events.
var rect = svg.append("rect")
  .attr("width",width)
  .attr("height",height)
  .attr("fill","none")
  .call(zoom);
  
d3.select("#extent")
  .on("click", function() {
    // Redfine the scale based on extent
    var extent = [10,20];

    // Build a new zoom transform:
    var transform = d3.zoomIdentity
      .scale( width/ ( scale(extent[1]) - scale(extent[0]) ) ) // how wide is the full domain relative to the shown domain?
      .translate(-scale(extent[0]), 0);  // Shift the transform to account for starting value
      
    // Apply the new zoom transform:
    rect.call(zoom.transform, transform);

  })
  
d3.select("#reset")
  .on("click", function() {
    // Create an identity transform
    var transform = d3.zoomIdentity;
    
    // Apply the transform:
    rect.call(zoom.transform, transform);
  })

// Handle both regular and artificial zooms:  
function zoomed() {
  var t = d3.event.transform;
  scale.domain(t.rescaleX(shadowScale).domain());
  g.call(axis);
}

rect {
  pointer-events: all;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<button id="extent">Zoom to extent 10-20</button><button id="reset">Reset</button><br />
<svg></svg>

看一下关键部分，当我们想要缩放到一定程度时，我们可以使用以下几行内容：

d3.select("something")
  .on("click", function() {
    // Redfine the scale based on scaled extent we want to show
    var extent = [10,20];

    // Build a new zoom transform (using d3.zoomIdentity as a base)
    var transform = d3.zoomIdentity
      // how wide is the full domain relative to the shown domain?
      .scale( width/(scale(extent[1]) - scale(extent[0])) ) 
      // Shift the transform to account for starting value
      .translate(-scale(extent[0]), 0);  

    // Apply the new zoom transform:
    rect.call(zoom.transform, transform);

  })

请注意，通过使用d3.zoomIdentity，我们可以利用身份转换（具有用于重新缩放的内置方法）并修改其缩放和转换以满足我们的需求。

创建人工缩放变换事件

1 个答案: