局部变量

D3 本地变量允许您定义独立于数据的本地状态。例如，在渲染 时间序列数据的多个子图 时，您可能希望所有图表使用相同的 x 轴比例尺，但使用不同的 y 轴比例尺来比较每个指标的相对性能。D3 本地变量的作用域由 DOM 元素决定：在设置时，值会存储在给定的元素上；在获取时，值会从给定元素或定义该值的最近祖先中检索。

注意

本地变量很少使用；您可能会发现将所需状态存储在选择的元素数据中更容易。

local()

源代码 · 声明一个新的本地变量。

const foo = d3.local();

像 var 一样，每个本地变量都是一个不同的符号引用；与 var 不同的是，每个本地变量的值的作用域也由 DOM 决定。

local.set(node, value)

源代码 · 将该本地变量在指定 node 上的值设置为 value，并返回指定的 value。这通常通过 selection.each 来执行。

selection.each(function(d) {
  foo.set(this, d.value);
});

如果您只是设置一个单一变量，请考虑使用 selection.property

selection.property(foo, (d) => d.value);

local.get(node)

源代码 · 返回该本地变量在指定 node 上的值。

selection.each(function() {
  const value = foo.get(this);
});

如果 node 未定义该本地变量，则返回定义该值的最近祖先的值。如果没有任何祖先定义该本地变量，则返回 undefined。

local.remove(node)

源代码 · 从指定 node 上删除该本地变量的值。

selection.each(function() {
  foo.remove(this);
});

如果 node 在删除之前定义了该本地变量，则返回 true，否则返回 false。如果祖先也定义了该本地变量，则这些定义不会受到影响，因此 local.get 仍将返回继承的值。

local.toString()

源代码 · 返回该本地变量的自动生成的标识符。这是用于在元素上存储本地变量值的属性的名称，因此您也可以使用 element[local] 或 selection.property 来设置或获取本地变量的值。