將標題附加到 D3 樹布局會導致錯誤 (D3)

Question

我正在嘗試向 D3 樹布局中的一些 SVG 標簽添加工具提示。 這是 function，其中標簽使用過渡呈現：

buildLabels() {
  const labelSelection = d3.select('svg g.labels')
    .selectAll('text.label')
    .data(this.nodes);
  labelSelection.exit()
    .remove();

  labelSelection.enter()
    .append('text')
    .style('fill', 'none')
    .style('stroke', 'none')
    .style('stroke-width', '0')
    .attr('transform', (d: any) => // ...)
    .style('fill-opacity', 0)
    .transition()
    .duration(450)
    .ease(d3.easeCircleIn)
    .attr('transform', (d: any) => {
      // ...
    })
    .attr('class', 'label')
    .style('stroke', '#393D3E')
    .style('fill', '#393D3E')
    .style('fill-opacity', 1)
    .style('stroke-width', '.4')
    .style('text-anchor', (d: any) => d.parent ? 'start' : 'end')
    .text(d => d.name);
}

我試過添加

.append('title')
.text(d => d.name)

在.text之后，但我得到一個很長的控制台錯誤

core.js:4061 ERROR TypeError: labelSelection.enter(...).append(...).style(...).style(...).style(...).attr(...).style(...).transition(...).duration(...).ease(...).attr(...).attr(...).style(...).style(...).style(...).style(...).style(...).text(...).append is not a function

如果我將 function 更改為：

labelSelection.enter()
  .append('text')
  .text(d => d.name)
  .append('title')
  .text(d => d.name);

我得到了我期望的 DOM，它是

<text>
  Node name
  <title>Node name</title>
</text>

然而，沒有一個節點看起來是正確的並且沒有它們應該的位置。 當然，轉換也都被刪除了。

我的問題是，是否有另一種方法可以添加一個不笨重的標題，或者我可以如何解決上述錯誤。 謝謝！

Answer 1

您正在嘗試將 append 轉換為：

labelSelection.enter() 
  .append('text') // returns a selection of newly entered text elements
  .style(...)     // returns that same selection
  .attr(... )     // returns that same selection
 //  ...
 .transition()    // returns a transition
 .duration(450)   // returns that same transition
 .ease(...)       // returns that same transition
  // ...
 .text(d => d.name) // returns that same transition
 .append(...)       // error

過渡和選擇共享很多方法（例如.style() 、 .attr()甚至.text() ），因此它們看起來非常相似，但它們並不共享所有方法。

您可以執行selection.append() ，但不能執行transition.append() 。 這就是您收到錯誤消息的原因， append不是轉換方法，它解釋了您的錯誤消息：

labelSelection.enter(...).append(...).style(...).style(...).style(...).attr(...).style(...).transition(...).duration(...).ease(...).attr(...).attr(...).style(...).style(...).style(...).style(...).style(...).text(...).append is not a function

.text 在這種情況下返回一個轉換（因為它被鏈接到一個轉換，如上面第一個代碼塊中所示），因此我們可以將其簡化為“transition.append 不是一個函數”。

相反，您可以通過保留對相關選擇的引用來打破您的方法鏈：

var labelEnter = labelSelection.enter() 
  .append('text') 
  .style(...)     
  .attr(... )     
 //  ...


 labelEnter.transition()    
 .duration(450)   
 .ease(...)      
 //  ...

 labelEnter.append("title")
   .text(...)

我認為會使您的方法鏈不必要地長的替代方法是使用transition.selection() ，它返回過渡對應的選擇：

 labelSelection.enter() 
  .append('text') 
  .style(...)     
  .attr(... )     
 //  ...
 .transition()    
 .duration(450)   
 .ease(...)      
  // ...
 .text(d => d.name); 
 .selection()   // return a selection instead of a transition
 .append("title")
   .text(...)