在D3版本4的Datum()中，这无法访问绑定元素

Question

请参阅d3 v4.0.0-alpha中的内联标签，

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 。

每个系列中的每个点都呈现标签。在此标签下，添加了一个白色矩形，其尺寸和位置是使用Element.GetBbox自动计算的。因此，由此产生的标签是清晰的

根据D3 V3 SET基准，我们应该创建一个新的选择，该选择不绑定到数据4(例如v4.7.4(中以后使用的数据。我试图创建如下的新选择，但是似乎Bbox是单个对象而不是多个对象，应该在D3 V4.0.0-Alpha中的上述代码中循环循环。

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

Answer 1

您的摘要不起作用，原因很简单。但是，在解决这一问题之前，关于您的问题的一些考虑因素：

• Bostock(Inline Labels(的代码使用D3 v4 ，而不是V3。
• append("rect", "text")不会将矩形附加到文本上。它将矩形附加到容器上，无论是svg还是组元素(在这种特殊情况下，组(， 文本。

最后一个子弹点很重要，因为文本将始终是与矩形有关的nextSiblings。

话虽如此，我们来到您的片段。当您这样做时：

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

您实际上只是在这样做：

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

，您的datum功能最终将是：

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

好吧，这与Bostock的代码大不相同，因为这个...

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

...将选择所有text元素，但仅返回到DOM中的第一个。这是由于node()而发生的，它是：

返回此选择中的 first (non-null(元素。(强调我的(

另一方面，在Bostock的代码中，这个...

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

...将指向每次迭代时的一个不同的DOM元素，因为this.nextSibling每次都会是一个不同的text元素(正如我们在本答案开头所看到的那样，是相应矩形的nextSibling(。