Javascript D3节点文本显示在工具提示中

我的以下代码位于：

我的json文件如下所示

[
{"name":"flare.analytics.A","size":3938,"imports":["flare.analytics.B,flare.analytics.C"]},
{"name":"flare.analytics.B","size":3812,"imports":["flare.analytics.C,flare.analytics.D"]},
{"name":"flare.analytics.C","size":3812,"imports":["flare.analytics.D,flare.analytics.E"]},
{"name":"flare.analytics.D","size":743, "imports":["flare.analytics.E,flare.analytics.F"]},
{"name":"flare.analytics.E","size":3534,"imports":["flare.analytics.F,flare.analytics.G"]},
{"name":"flare.analytics.F","size":5731,"imports":["flare.analytics.G,flare.analytics.H"]},
{"name":"flare.analytics.G","size":7840,"imports":["flare.analytics.H,flare.analytics.I"]},
{"name":"flare.analytics.H","size":5914,"imports":["flare.analytics.I,flare.analytics.A"]},
{"name":"flare.analytics.I","size":3416,"imports":["flare.analytics.B,flare.analytics.A"]}
]

在本教程之后，我在上面的代码中添加了一个工具提示

我补充说

.d3-tip in Style section

然后我添加了函数

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency +     "</span>";
  })

svg.call(tip);

我加了一句

node
.classed("mouseover", tip.hide);

问题是，它总是从我的树中选择第一个元素，并显示为工具提示

我在网上找到了答案

但我不确定如何将其集成到我的代码中

更新

node = node
  .data(nodes.filter(function(n) { return !n.children; }))
.enter().append("text")
  .attr("class", "node")
  .attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
  .attr("dy", ".31em")
  .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")" + (d.x < 180 ? "" : "rotate(180)"); })
  .style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
  .text(function(d) { return d.key; })
  .on("mouseover", mouseovered)
  .on("mouseout", mouseouted);
});

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<span style='color:red'>" + d3.select("text").text()+ "</span>";
  })

node=node
.data（nodes.filter（函数（n）{return！n.children；}））
.enter（）.append（“文本”）
.attr（“类”、“节点”）
.attr（“dx”，函数（d）{返回d.x<180？8:-8；}）
.attr（“dy”，“.31em”）
.attr（“transform”，函数（d）{return“rotate”（+（d.x-90）+”）“translate”（+d.y+）”）+（d.x<180？”：“rotate（180）”；}）
.style（“文本锚定”，函数（d）{返回d.x<180？“开始”：“结束”}）
.text（函数（d）{return d.key；}）
.on（“鼠标悬停”，鼠标悬停）
.on（“mouseout”，mouseout）；
});
var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-10,0]）
.html（函数（d）{
返回“+d3.选择（“文本”）.text（）+”；
})

您可以在mouseovered函数中设置提示的html属性（而不是在定义“提示”的位置）：

---

显示的文本是什么？使用与工具提示设置相同的表达式。@Larskothoff无论我悬停的文本是什么，每次都会显示“A”，即JSON文件中的第一个字母。问题是它被分为两个独立的功能。我不知道如何合并它们。转换将如何发生？您可以向我们展示您用于设置

文本

元素内容的代码吗？您是否也尝试过在工具提示中使用

d.key

？是的。当我添加它时，它会显示最后一个节点，而不是第一个节点。i、 e“我”

node
.classed("mouseover", tip.hide);

node = node
  .data(nodes.filter(function(n) { return !n.children; }))
.enter().append("text")
  .attr("class", "node")
  .attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
  .attr("dy", ".31em")
  .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")" + (d.x < 180 ? "" : "rotate(180)"); })
  .style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
  .text(function(d) { return d.key; })
  .on("mouseover", mouseovered)
  .on("mouseout", mouseouted);
});

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<span style='color:red'>" + d3.select("text").text()+ "</span>";
  })

function mouseovered(d) {
   tip.html("<strong>Frequency:</strong> <span style='color:red'>" + d.key + "</span>"
);

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0]);