Hi everyone I am using sunburst of D3.js I want to include a text element inside each element.
For that my code is like this
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");
}
and it works my structure is like this
<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>
I add display none to my text style, and I want to change the style (appears the text when the mouse is over this path)
for that purpose I use this
var g = gs.enter().append("g")
.on("mouseover", mostrar)
like this
function mostrar(d){
...
$(this).closest('text').css("display", "inherit");
}
but this $(this).closest('text')
return an empty array []
. Any idea how to get the text when my mouse is over this part of the plot.
Thanks in advances
First of all: this mix of D3 and jQuery is definitely not the best practice.
That being said, you can easily get the hovered element with this
, and select the text
with a simple selection. After that, set the style with style
d3.select(this).select("text").style("display", "inherit");
Here is a demo with your paths and texts:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.