selection.data 返回不同类型的对象

Question

在每个循环中，我都会对选定的对象执行一些更新（请参阅下面的代码片段），首先使用 exit() 调用删除已删除的元素。我刚刚添加了一个滑块来修改其中一个对象中的参数，当滑块移动时，我调用相同的更新方法（再次使用下面的代码）。然而，当滑块触发更新时，选择是不同的......特别是 exit() 方法失败 --- TypeError: selection.exit is not a function（和 I think I'm avoiding the standard cause 的问题）。

var selection = svgSim.selectAll(".bh")
    .data(binary);

// Remove old
console.log("sel = ", selection);
var olds = selection.exit();
olds.remove();

当我将 selection 登录到控制台时，内容基本相同...但是对象类型或类似内容似乎有所不同。请参见下面的屏幕截图。 selection ("sel = [...]") 的第一个打印输出是工作正常的时候。下次它引发错误时，打印的格式不同 - 尽管它似乎包含相同的基本数据。

为什么 selection.data() 在不同的上下文中调用时返回不同类型的对象？
console.log 输出有何不同：pt（在输出中）是什么以及此处打印的不同类型的对象是什么。

注意：我理解这个非 MWE 是否不足以完全解决问题，这就是为什么我试图问一些可能帮助我找到问题的具体（子）问题, none-少.

数据看起来像，

var phaseInit = Math.random();
var binary = [
    {name: "a", phase: phaseInit, mass: m1},
    {name: "b", phase: phaseInit + 0.5, mass: m2}
];

当滑块移动时，我正在修改数据，如：

binary[0].mass = sliderScaleM1.invert(sval);

（对 javascipt 和 d3 非常陌生）

Answer 1

由于我们无法访问 MWE ()，因此这是一个一般性的回答，试图根据所提供的信息澄清问题。

在 D3 中，data() 方法接受三个东西：

一个数组；
一个函数；
没有。

在第一种和第二种情况下，data()是一个setter。然而，在第三种情况下，data()是一个getter.

我们可以在一个基本示例中看到这一点：

var body = d3.select("body");
var data = ["foo", "bar", "baz"];
var sel = body.selectAll(null)
  .data(data);
sel.enter()
  .append("p")
  .html(String)

console.log(sel)

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

但是，如果我们使用 data() 作为 getter，我们就没有选择了：

var body = d3.select("body");
var data = ["foo", "bar", "baz"];
var sel = body.selectAll(null)
  .data(data);
sel.enter()
  .append("p")
  .html(String)
var sel2 = body.selectAll("p").data()

console.log(sel2)

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

因此，您不能对该变量调用 exit()：它不是 D3 选择，而只是数据数组。

查看您的控制台，我们可以看到，在 19:57:07 处，sel 是常规的 D3 选择。但是，在 19:57:12 处，sel 只是一个数组，更具体地说是您的数据数组。

因此，总而言之，您在代码中以某种方式将 data() 用作 getter，并且变量 sel 不再包含 D3 选择。

selection.data 返回不同类型的对象

selection.data returning different types of objects

javascript

web-inspector

d3.js