は、マウスが上がったときに表示されます。D3

Question

皆さん、私はD3.jsのサンバーストを使用しています。各要素の中にテキスト要素を入れたいと思います。

のために（私のコードは、この

var path = g.append("path"); 

if (data_key != "used"){ 
    svg.selectAll("g").append("text") 
    .attr("dx", function(d){return -50}) 
    .attr("dy", function(d){return 20}) 
    .attr("class", "all_users") 
    .style("display", "none") 
    .text("text"); 
} 

のようなもので、それは私の構造は、私は私のテキストスタイルに表示なしを追加していないこの

<g> 
<path style="stroke: rgb(255, 255, 255); stroke-width: 1; fill: transparent; opacity: 0.3;" d="M0,63.58917920822171A63.58917920822171,63.58917920822171 0 1,1 0,-63.58917920822171A63.58917920822171,63.58917920822171 0 1,1 0,63.58917920822171Z"></path> 
<text dx="-50" dy="20" class="all_users" style="display: none;">text</text> 
</g> 

ようなもので動作し、私はスタイルを変更したいこと私はこの

を使用し、その目的のために

）マウスは、このパス上にあるテキストときに表示されるこの

function mostrar(d){ 
    ... 
     $(this).closest('text').css("display", "inherit"); 

    } 

よう

が、これは空の配列を返す[]$(this).closest('text')。私のマウスがプロットのこの部分の上にあるときにテキストを取得する方法。進歩で

おかげで、すべての

Answer 1

まず：D3とjQueryのこのミックスは間違いなくベストプラクティスではありません。

これは、ホバリングされた要素をthisで簡単に取得でき、簡単な選択でtextを選択することができます。その後、ここでstyle

d3.select(this).select("text").style("display", "inherit"); 

でスタイルを設定し、あなたのパスやテキストとデモです：

var g = d3.selectAll("g"); 
 
g.on("mouseover", show).on("mouseout", hide); 
 

 
function show() { 
 
    d3.select(this).select("text").style("display", "inherit"); 
 
} 
 

 
function hide() { 
 
    d3.select(this).select("text").style("display", "none"); 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg> 
 
    <g transform="translate(50,75)"> 
 
     <path style="stroke: black; stroke-width: 1; fill: transparent; opacity: 0.3;" d="M0,63.58917920822171A63.58917920822171,63.58917920822171 0 1,1 0,-63.58917920822171A63.58917920822171,63.58917920822171 0 1,1 0,63.58917920822171Z"></path> 
 
     <text dx="-50" dy="20" class="all_users" style="display: none;">text</text> 
 
    </g> 
 
    <g transform="translate(150,75)"> 
 
     <path style="stroke: black; stroke-width: 1; fill: transparent; opacity: 0.3;" d="M0,63.58917920822171A63.58917920822171,63.58917920822171 0 1,1 0,-63.58917920822171A63.58917920822171,63.58917920822171 0 1,1 0,63.58917920822171Z"></path> 
 
     <text dx="-50" dy="20" class="all_users" style="display: none;">text</text> 
 
    </g> 
 
    <g transform="translate(250,75)"> 
 
     <path style="stroke: black; stroke-width: 1; fill: transparent; opacity: 0.3;" d="M0,63.58917920822171A63.58917920822171,63.58917920822171 0 1,1 0,-63.58917920822171A63.58917920822171,63.58917920822171 0 1,1 0,63.58917920822171Z"></path> 
 
     <text dx="-50" dy="20" class="all_users" style="display: none;">text</text> 
 
    </g> 
 
</svg>