更新d3正文文本

Question

如何從SVG樹節點mouseover事件中更好地更新正文文本元素？當我嘗試以下時，文本被更新，但SVG從顯示中刪除。這裏是一個代碼：

var svg = d3.select('body') 
    .append('text').text('The Entry Point and M Code: ') 
    .attr('class', 'centralText') 
    .attr('x', 10) 
    .attr('y', 10) 
    .attr('text-anchor', 'middle') 

    .append('svg') 

這裏是我的事件代碼：

var nodeEnter = node.enter().append('g') 
    .attr('class', node_class) 
    .attr('transform', function(d) { 
     return 'translate(' + source.x0 + ',' + source.y0 + ')'; }) 
    .style('cursor', function(d) { 
     return (d.children || d._children) ? 'pointer' : '';}) 
    .on('click', click) 
    .on("mouseover", function(d) { 
     d3.select('body') 
      .text('M Code: is this') 

Answer 1

但是也有一些來了兩個不同的問題。首先，svg的初始化將其附加到text元素，這是一個壞主意。其次，要更新要替換正文而不是文本元素的文本。

需要進行兩項更改。首先，你的mouseover功能改成這樣：

d3.select('body').select('text') 
      .text('M Code: is this'); 

這通常修復它，但第二個問題是，svg追加到text元素，以便它仍然會被刪除。要解決此問題，請將您的聲明更改爲以下內容：

d3.select('body') 
    .append('text').text('The Entry Point and M Code: ') 
    .attr('class', 'centralText') 
    .attr('x', 10) 
    .attr('y', 10) 
    .attr('text-anchor', 'middle'); 

var svg = d3.select('body').append('svg');