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

まで来ている2つの別々の問題があります。まず、svgの初期化でそれをtext要素に追加していますが、これは悪い考えです。次にテキストを更新するには、テキスト要素ではなく本文を置き換えます。

2つの変更が必要です。まず、これまであなたの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');