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