d3 scaleLinear更新和缩放冲突

Question

我在d3中结合手动更新和缩放功能时遇到了问题。

这是一个小型演示代码，它从一个较大的模块中切除，只创建一个线性刻度。

https://jsfiddle.net/superkamil/x3v2yc7j/2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="top" class="checkbox" id="check1" value="black top" />
<input type="checkbox" name="top" class="checkbox" id="check2" value="squish" value="blue something" />
<button type="button" onclick="submit()">Click Me!</button>

1. 将x轴缩小为0 - 10000（随机数）
2. 点击＆＃34;设置＆＃34;按钮
3. X轴将域设置为0 - 100
4. 再次开始缩小

- ＆GT;预期：缩放从域0 - 100

开始

- ＆GT;结果：缩放跳回到上一个缩放级别0 - 10000

我知道，d3正在使用缩放副本，并且我正在更新原始比例，但我找不到如何组合它们或如何将缩放级别设置为原始比例的方法。

https://github.com/d3/d3-zoom/blob/master/README.md#transform_rescaleX

谢谢！

Answer 1

您可以重新创建缩放行为，也可以只重置当前的缩放变换。 您应该能够重置每个参数（缩放和平移）或只重置它们。以下示例还会触发特定于缩放的事件，但由于您已经拥有域集，因此它不应该是视觉问题。

例： 加   this.element.select（＆＃34; rect＆＃34;）。call（this.zoom.transform，d3.zoomIdentity）; 在你的更新功能。

有关https://github.com/d3/d3-zoom/blob/master/README.md#zoom_transform中缩放api的更多信息。我还在https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f找到了使用过渡动画的示例。 我还更新了小提琴：

update(options) {

  this.options = Object.assign(this.options, options);
  this.scale = this._createScale();
  this.axis = this._createAxis();

  this.linearscale.call(this.axis);
  this.element.select("rect").call(this.zoom.transform, d3.zoomIdentity);
}

https://jsfiddle.net/x3v2yc7j/8/