更新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');