鼠標結束時出現文字D3

大家好，我正在使用D3.js的sunburst我想在每個元素中包含一個文本元素。鼠標結束時出現文字D3

對於我的代碼是這樣的

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>

我添加顯示沒有到我的文字風格，我想改變風格（當鼠標在此路徑上時出現文字）

爲此目的我用這個

var g = gs.enter().append("g") 
     .on("mouseover", mostrar)

這樣

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

    }

但這$(this).closest('text')返回一個空數組[]。任何想法如何讓我的鼠標在這部分情節的文本。

感謝進步

來源

2017-01-16 Stone

'element.textContent'？或'$ element.text（）'？ – evolutionxbox

謝謝@evolutionxbox但這不會改變div的樣式，這會返回值！ – Stone

好的。你在一個問題中提出了兩個問題。「'我想改變風格'」和「'當我的鼠標移過這部分情節時如何獲得文本。」 – evolutionxbox

首先：這個組合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>

來源

2017-01-16 15:46:37

鼠標結束時出現文字D3

回答

相關問題