我有这个d3项目,在其中创建了条形图。我有几个栏,当我将鼠标悬停在特定栏上时,我想显示数据。但是,由于某种原因,尽管存在数据和css,它也不会显示内容。我创建了rects元素为bar和一个div元素,其工具提示类包括数据。请帮忙。
这是我的代码:
chart.selectAll("rect")
.data(json.data)
.enter()
.append("rect")
.attr("x", (d) => xScale(parseDate(formatDate(d[0]))))
.attr("y", (d) => yScale(d[1]))
.attr("height", (d) => height - yScale(d[1]))
.attr("width", xScale.bandwidth())
.attr("class", "rect-col")
.append("div")
.attr("class", "tooltip")
.text((d) => d[0] + d[1])
.on("mouseenter", function (d, i) {
//d3.select(this).style("fill", "#EE9A2F");
d3.select(this).style("visibility", "visible");
})
.on("mouseleave", function (d, i) {
//d3.select(this).style("fill", "#EECF10");
d3.select(this).style("visibility", "visible");
});
我的CSS:
.tooltip {
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: green;
border: 0px;
border-radius: 8px;
pointer-events: none;
color: red;
visibility: hidden;
}
链接到我的Codepen codepen
答案 0 :(得分:1)
简单地说:您不能将<div>
附加到SVG <rect>
中。
这里的解决方案是为div创建一个选择...
const tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip");
...,然后在矩形的"mouseenter"
侦听器内:
tooltip.style("visibility", "visible")
.text(d[0] + d[1])
这是更新的CodePen,您将在图表下方看到工具提示:https://codepen.io/anon/pen/LaZgvp?editors=0010。这很可能会引起您的下一个问题:“如何将工具提示放置在相应矩形上方/旁边?” 通过简单的搜索即可找到该问题的答案,肯定是重复的(例如:https://stackoverflow.com/a/41625629/5768908和https://stackoverflow.com/a/40720100/5768908)。