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

更新d3正文

1 个答案: