更新 d3 正文

Question

如何最好地从 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')

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