私がカーソルを置いたときにテキストが表示される接続線

Question

今すぐ保持してクリックすると、各円のテキストが表示されます。マウスクリックを離れると、テキストが消えます。さまざまなサークル（国）に接続する線については、サークルと同様にクリック可能なテキストも表示したいと思います。行の上にマウスを置くと、どのようにテキストを接続線に表示させることができますか？

codepen（https://codepen.io/apextrea/pen/JMXmgY）にアクセスしてください。

window.onload = function() { 
    var drawOptions = {  
     // dimensions of svg element 
     SVG_WIDTH:  800, 
     SVG_HEIGHT:  600, 
     SHRINK_FACTOR: 100, 
     BIG_CIRCLE: 200 
    }; 
} 

Answer 1

これはあなたが探しているものですか？

Codepen DEMO

新しいコードの変更：

1. あなたが円にバインドはdragstartとdragendイベントのイベントを持っています。同様に、行にもこれらのイベントがあります。

   d3.selectAll('line.connector').call(d3.drag() 
       .on('start', displayConnectorName) 
       .on('end', removeName)); 
   

   名前を表示するために、サークルと同様の機能を使用していますが、この場合の位置は明らかに異なります。

   ここ関数の：

   関数displayConnectorName（D）{ VAR thisLine = d3.select（本） について

     var textX = (+thisLine.attr('x1')+(+thisLine.attr('x2')))/2; 
         var textY = (+thisLine.attr('y1')+(+thisLine.attr('y2')))/2; 
   
         //create a text element 
         //give it an id so it can be deleted at drag end 
         //attributes are based on the line being dragged 
   
         d3.select('svg') 
          .append('text') 
          .attr('id', 'dragName') 
          .attr('x', textX) 
          .attr('y', textY).attr('dx', '-3em') 
          .text(d.source + ' - ' + d.target) 
          .attr('font-size', 20) 
       .attr('fill', 'orange'); 
   

   }

   この名前を除去textに取り付けidがdragName

2. 位置についてを円と同じ、すなわちされるように、同じremoveName機能が使用され現在、テキストは行の中央にあり、テキストは

ソース・ターゲット

しかし、私は、あなたがここからそれを取るし、要件に応じてそれらを変更することができると思います。

3. 円は、州を表し、国を表しません。:)

これが役に立ちます。 :)

Answer 2

あなたが探しているのはツールチップです。 svg:title要素を各円に追加することで実装できます。 次のブラウザにツールチップが表示され、ホバーイベントについて心配する必要はありません。

以下のリンクに従ってください：必要なものを理解するのに役立つかもしれません。

は

https://github.com/caged/d3-tip

http://bl.ocks.org/Caged/6476579