Question

我只是好奇为什么d3.select("svg") == d3.select("svg")会解析为false而不是true。

在浏览器中加载了D3（我尝试了chrome和FF）后，我在控制台中输入了这行代码，这给了我令人惊讶的结果。

我使用了D3版本5

html正文如下：

<body>
<svg></svg>
</body>

Answer 1

other answer为您的问题提供了一种替代方法（以及正确的方法）。我在这里的目的是说明为什么，您获得了false。

这归结为在JavaScript中比较对象（{} !== {}）的古老而著名的情况：

console.log({} === {})

您可以通过查看this question和this question的答案来了解有关此主题的更多信息。 this question的第一个答案也很有趣，也很有教益。

返回D3：

在D3 v3及以下版本中，选择是数组，而在D3 v4及以上版本中（如V5，您正在使用的选择），选择是对象。两者都将为object返回typeof：

const svg = d3.select("svg");
console.log(typeof svg)

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

并且，在两种情况下（数组或对象），比较将返回false。

因此，即使两个不同的选择指向同一个DOM元素，作为对象的选择也不同：

const svg1 = d3.select("svg");
const svg2 = d3.select("svg")
console.log(svg1 === svg2)

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

最后，关于您的comment，您使用的局部变量错误：您必须将其设置为 node 而不是选择。 API很清楚：

local.set（节点，值） <>

将指定的节点上的本地变量的值设置为该值，并返回指定的值。（强调我的）

如果正确使用它，它将起作用：

const a = d3.select("svg");
const b = d3.select("svg");
const local = d3.local();
local.set(a.node(), 561);
console.log(local.get(b.node()))

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

Answer 2

d3.select("svg")-返回d3选择对象
d3.select("svg").node()-返回DOM节点

console.log(d3.select("svg") == d3.select("svg"))

console.log(d3.select("svg").node() == d3.select("svg").node())

<script src="//d3js.org/d3.v4.0.0-alpha.23.min.js"></script>

<svg></svg>