는 마우스가 끝났을 때 텍스트로 표시됩니다. 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> 

처럼 작동하고, 나는 스타일을 변경하려는 나는이

사용하는 목적을 위해 마우스를이 경로를 통해있는 텍스트)

나타납니다 865,103,210 이

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

    } 

같은

그러나 이것은 하늘의 배열 []을 반환 $(this).closest('text'). 내 마우스가 음모의이 부분 위에있을 때 텍스트를 얻는 방법에 대한 아이디어. 진보

모든

Answer 1

최초의

감사 : D3와 jQuery를이 혼합 확실히 가장 좋은 방법이 아닙니다.

즉, this으로 쉽게 hovered 요소를 가져올 수 있으며 간단한 선택으로 text을 선택할 수 있습니다. `element.textContent`

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>