Javascript d3版本4的此in-Datum（）无法访问绑定元素

参考d3 v4.0.0-alpha 9

label.append("rect", "text")
  .datum(() => this.nextSibling.getBBox())
  .attr('x', d => (d.x - labelPadding))
  .attr('y', d => (d.y - labelPadding))
  .attr('width', d => (d.width + (2 * labelPadding)))
  .attr('height', d => (d.height + (2 * labelPadding)));

通过this访问datum（）内的元素，它将向文本追加一个rect

将为每个系列中的每个点渲染标签。在这个标签下面，添加了一个白色矩形，它的大小和位置是使用element.getBBox加上一点填充自动计算的。由此产生的标签清晰可见

根据，我们应该创建一个不绑定到数据的新选择，以供以后在版本4（例如v4.7.4）中使用。我试图创建如下所示的新选择，但看起来bbox是单个对象，而不是多个对象，应该在数据中循环，如上面D3V4.0.0-alpha 9中的代码所示

const newText = label.selectAll('text');
const bbox = newText.node().getBBox();

label.append('rect', 'text')
    .datum(() => bbox)
    .attr('x', d => (d.x - labelPadding))
    .attr('y', d => (d.y - labelPadding))
    .attr('width', d => (d.width + (2 * labelPadding)))
    .attr('height', d => (d.height + (2 * labelPadding)));

---

您的代码段无法工作，原因很简单。但是，在此之前，请考虑一下您的问题：

• 来自Bostock（内联标签）的代码使用D3v4，而不是v3

• 追加（“矩形”、“文本”）

  不会将矩形追加到文本。它将矩形附加到容器中，无论是SVG还是group元素（在本例中为group），在文本之前

最后一个要点很重要，因为文本始终是与矩形相关的下一个标签

话虽如此，我们来看你的片段。执行此操作时：

const newText = label.selectAll('text');
const bbox = newText.node().getBBox();

实际上，您正在这样做：

const bbox = label.selectAll('text').node().getBBox();

而您的

基准

功能最终将是：

.datum(() => label.selectAll('text').node().getBBox();)

这和Bostock的代码有很大的不同，因为

label.selectAll('text').node()

。。。将选择所有

文本

元素，但只返回到DOM中的第一个。这是因为

节点（）

，它：

返回此选择中的第一个（非空）元素。（强调矿山）

另一方面，在博斯托克的代码中，这个

.datum(() => this.nextSibling.getBBox())

---

。。。每次迭代都会指向不同的DOM元素，因为

this.nextSibling

每次都是不同的

text

元素（正如我们在本答案开头所看到的，它是相应矩形的

nextSibling

）。

感谢您的解释，这仍然指向v4.0.0-alpha.9版本的datum（）中的绑定元素，但不是v4.7.4，我可以知道如何将v4.0.0-alpha.9中的datum功能与v4.7.4中的datum功能相同吗？它总是给我关于无法从null对象获取bbox（）的错误。感谢这与

datum

函数无关，后者是相同的。如果您使用的是v4.7，请使用

insert

而不是

append

，因为文本必须是rect的下一个同级。下面是使用v4.7的模块：是的，您的示例显示了我需要什么。在我将

append

替换为

insert

之后，我发现它仍然不起作用，直到我将

.datum（（）=>this.nextSibling.getBBox（））的行替换为
.datum（函数（）{返回this.nextSibling.getBBox（）；}）
。看起来数据中的箭头函数并不像我预期的那样工作
此
箭头函数中的对象为空。你能帮我澄清这个疑问吗？非常感谢。