向 d3.js 层级条形图添加工具提示
Add tooltip to d3.js hierarchical bar chart
我正在尝试添加带有鼠标悬停分层条形图的工具提示,它是由 Mike Bostock 在此处创建的 (https://bl.ocks.org/mbostock/1283663)。我无法通过传统方式添加工具提示,因为代码有点不同。谁能帮帮我?
你可以这样做:
bar.append("text")
.attr("class", "moreText")
.attr("x", function(d) { return x(d.value) + 20; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.attr("fill", "none")
.text(function(d) { return d.value; })
在 bar
函数中添加这个以获得悬停效果
bar.on("mouseover", function() {
d3.select(this).select(".moreText").attr("fill", "#333")
.attr("x", function(d) { return x(d.value) + 15; })
})
.on("mouseout", function() {
d3.select(this).select(".moreText").attr("fill", "none")
})
在同一个函数中,在此处添加 .attr("x", function(d) { return x(d.value) + 15; })
以确保我们在转换前后都获得正确矩形的正确坐标,并通过 class 引用文本,如下所示:
d3.select(this).select(".moreText")
这是一个有效的 plunker
我正在尝试添加带有鼠标悬停分层条形图的工具提示,它是由 Mike Bostock 在此处创建的 (https://bl.ocks.org/mbostock/1283663)。我无法通过传统方式添加工具提示,因为代码有点不同。谁能帮帮我?
你可以这样做:
bar.append("text")
.attr("class", "moreText")
.attr("x", function(d) { return x(d.value) + 20; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.attr("fill", "none")
.text(function(d) { return d.value; })
在 bar
函数中添加这个以获得悬停效果
bar.on("mouseover", function() {
d3.select(this).select(".moreText").attr("fill", "#333")
.attr("x", function(d) { return x(d.value) + 15; })
})
.on("mouseout", function() {
d3.select(this).select(".moreText").attr("fill", "none")
})
在同一个函数中,在此处添加 .attr("x", function(d) { return x(d.value) + 15; })
以确保我们在转换前后都获得正确矩形的正确坐标,并通过 class 引用文本,如下所示:
d3.select(this).select(".moreText")
这是一个有效的 plunker