鼠标移到 D3 上时出现文本答案

【问题标题】：appears text when mouse is over D3鼠标移到 D3 上时出现文本
【发布时间】：2017-01-16 14:54:30
【问题描述】：

大家好，我正在使用 D3.js 的 sunburst 我想在每个元素中包含一个文本元素。

为此我的代码是这样的

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>

我将 display none 添加到我的文本样式中，并且我想更改样式（当鼠标悬停在此路径上时显示文本）

为此我使用它

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

喜欢这个

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

  }

但是这个$(this).closest('text') 返回一个空数组[]。知道当我的鼠标悬停在情节的这一部分上时如何获取文本。

提前致谢

【问题讨论】：

element.textContent?或$element.text()?
感谢@evolutionxbox，但这不会改变 div 的样式，而是返回值！
好的。你一共问了两个问题。 “I want to change the style”和“Any idea how to get the text when my mouse is over this part of the plot.”

标签： javascript d3.js sunburst-diagram

【解决方案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>

【讨论】：