這在D3版本基準（）4不能訪問綁定元素

Question

參見Inline Labels在D3 V4.0.0-α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))); 

它將附加一個矩形由接入該元件爲文本數據內（）通過這個。

爲每個系列中的每個點呈現標籤。在這個標籤下面，添加了一個白色的矩形，它的大小和位置是使用element.getBBox加上一點點的填充自動計算出來的。由此產生的標籤是易讀的

根據D3 v3 set datum，我們應該創建一個新的選擇，不綁定到以後在版本4中使用的數據（例如v4.7.4）。我試圖創建像以下新的選擇，但在基準看起來bbox被單個對象而不是多個對象應該是循環通過如上述代碼在D3 V4.0.0-α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))); 

Answer 1

您的片段是沒有工作的原因很簡單。但是，之前尋址，關於你的問題的一些注意事項：

• 從博斯托克（內嵌標號），代碼使用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();) 

嗯，這是從博斯托克的顯着不同代碼，因爲這...

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

...將選擇所有text元素，但只返回到DOM中的第一個。出現這種情況是因爲node()，其中：

返回第一（非空）元素在此選擇。 （重點煤礦）

在另一方面，在博斯托克的代碼，這...

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

...將在每次迭代時指向一個不同的DOM元素，因爲每次都會有this.nextSibling元素會出現不同的text元素（正如我們剛剛在本答案的開頭所看到的那樣，它是相應矩形的nextSibling）。