当鼠标悬停在 D3 上时出现文本
appears text when mouse is over D3
大家好我正在使用 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>
我将显示 none 添加到我的文本样式中,我想更改样式(当鼠标悬停在该路径上时出现文本)
为此我使用了这个
var g = gs.enter().append("g")
.on("mouseover", mostrar)
像这样
function mostrar(d){
...
$(this).closest('text').css("display", "inherit");
}
但是这个 $(this).closest('text')
return 是一个空数组 []
。知道当我的鼠标悬停在这部分图上时如何获取文本。
提前致谢
首先:D3 和 jQuery 的这种组合绝对不是最佳做法。
话虽如此,您可以使用 this
轻松获得悬停元素,并使用简单的 selection select 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>
大家好我正在使用 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>
我将显示 none 添加到我的文本样式中,我想更改样式(当鼠标悬停在该路径上时出现文本)
为此我使用了这个
var g = gs.enter().append("g")
.on("mouseover", mostrar)
像这样
function mostrar(d){
...
$(this).closest('text').css("display", "inherit");
}
但是这个 $(this).closest('text')
return 是一个空数组 []
。知道当我的鼠标悬停在这部分图上时如何获取文本。
提前致谢
首先:D3 和 jQuery 的这种组合绝对不是最佳做法。
话虽如此,您可以使用 this
轻松获得悬停元素,并使用简单的 selection select 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>