javascript - 如何确定两个 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());
};

这是波段刻度的复制函数:

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。