如何确定两个 d3 量表是否相等或 d3 量表是否已更改？

Question

我正在将 React 与 d3 一起使用，并且我正在尝试研究如何在比例更改时正确触发渲染。但是，要可靠地检测尺度是否发生了变化是相当困难的。

理论上，我可以想到两种解决问题的方法。

我可以在每次渲染时重新生成比例，然后有一种可靠的方法来确定两个比例是否相同（例如比较它们的域、范围等）。但是仍然存在一些问题——例如，我实际上并不确定如何区分具有相同域和范围的线性刻度和对数刻度。 （如果我尝试一个测试值——比如域的中点——如果给定一个非数字比例，它会崩溃。我可以通过，呃，'reverse-duck-typing'所有 d3 的各种比例来避免这种情况，但这似乎非常繁琐，如果测试功能变得过于简单，可能会降低性能。）

另一种解决方案是在渲染中保持一致的缩放对象，但如果其任何属性发生更改，则以某种方式获取缩放以触发渲染。我认为这最终会与第一个选项中的相同，但也许 d3 中有一些我不知道的技巧使它更容易？

Answer 1

（警告：这是一个 非常 hacky 的解决方案，用于了解您拥有什么样的规模。如果您不满意，请告诉我，我会删除它）

D3 v4.x 中的每个比例都有一个copy 函数，它公开了比例的类型。例如，这是线性刻度的copy 函数：

scale.copy = function() {
    return copy(scale, linear());
};

这是波段刻度的copy 函数：

scale.copy = function() {
    return band()
        .domain(domain())
        .range(range)
        .round(round)
        .paddingInner(paddingInner)
        .paddingOuter(paddingOuter)
        .align(align);
};

等等……

如您所见，刻度的类型始终存在于返回值中（如果您使用的是 D3 的非缩小版本）。

因此，我们可以使用它来比较尺度（在比较域和范围的基础上，就像您现在所做的那样）。这是一个例子：

var scale1 = d3.scaleBand();
  
var scale2 = d3.scaleLinear();
  
var scale3 = d3.scaleLinear();
  
console.log("Is scale1 the same of scale2? " + (scale1.copy.toString() === scale2.copy.toString()))
console.log("Is scale1 the same of scale3? " + (scale1.copy.toString() === scale3.copy.toString()))
console.log("Is scale2 the same of scale3? " + (scale2.copy.toString() === scale3.copy.toString()))

<script src="https://d3js.org/d3.v4.min.js"></script>

这可用于测试具有相同域和范围的不同尺度（正如您在问题中所问的那样）：

var scale1 = d3.scaleLinear()
  .domain([10, 20])
  .range([10, 20]);

var scale2 = d3.scaleLog()
  .domain([10, 20])
  .range([10, 20]);

console.log("Is scale1 the same of scale2? " + (scale1.copy.toString() === scale2.copy.toString()))

<script src="https://d3js.org/d3.v4.min.js"></script>

编辑：与其比较copy，不如比较整个函数。正如@altocumulus 在comments section 中指出的那样，一些秤返回相同的copy。