Javascript 更新d3正文

如何最好地从SVG树节点鼠标悬停事件更新正文元素？当我尝试以下操作时，文本将更新，但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')

---

接下来会有两个不同的问题。首先，

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

---

最后一行将整个

正文

替换为一行文本。因此svg也被删除了