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

【问题标题】：selection.data returning different types of objectsselection.data 返回不同类型的对象
【发布时间】：2017-12-06 01:15:05
【问题描述】：

每个循环，我都会对选定的对象执行一些更新（参见下面的代码 sn-p），首先使用 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 不足以完全解决问题，这就是为什么我试图提出一些具体的（子）问题来帮助我找到问题，没有-less。

数据看起来像，

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 来说非常新）

【问题讨论】：

您为什么不创建一个 sn-p（<> 按钮），其中包含一个重现问题的基本示例？现在很难说你是如何重新绑定数据和更新选择的。
@GerardoFurtado 感谢您的关注。如果需要，我会尝试......但如果不包含整个（数千行）文件，则制作 MWE 将非常困难。我希望有人可以根据给定的信息或我可以更容易提供的其他特定信息（例如，我试图包括数据的更改方式）来识别此类问题......如果事实并非如此：那我肯定要更加努力地制作 MWE。
控制台中的第一个 sel (19:57:07) 是 D3 选择。然而，第二个（19:57:12）只是一个数组，更具体地说是数据数组。您如何在它们之间更改sel？这里缺少一些信息，你看到了吗？我的猜测是，您使用 data 作为吸气剂 (data())，而它应该是 setter (data(binary))。
@GerardoFurtado 好的，我会在 MWE 上更加努力。但是上面显示了打印sel = 的代码，并且selection 在两个调用中以相同的方式定义......第二次，selection.data(...) 返回一个数组而不是一个选择。是否有特定的时间会发生这种情况？
正如我上面所说，您是使用data 作为getter 还是setter？如果您使用的是var selection = svgSim.selectAll(".bh").data();，那么您不再拥有 D3 选择。

标签： javascript d3.js web-inspector

【解决方案1】：

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

在 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)

&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;

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

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)

&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;

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

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

因此，总而言之，不知何故，在您的代码中，您使用 data() 作为 getter，而变量 sel 不再包含 D3 选择。

【讨论】：