有没有人知道是否有可能在y轴标签上有鼠标悬停事件？例如,我在下面有一个散点图.y轴上的标签是"area1","area2"和"area3".当用户悬停标签"area1"时,将弹出工具提示以显示area1的描述.我以前没有看到过这样的例子.有人知道怎么做吗？非常感谢!
我这里也有一个傻瓜http://plnkr.co/edit/wLjanxFWIzpxP0cbq6kK?p=preview
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Plot</title>
<style>
.axis path,
.axis line{
fill: none;
stroke: #000;
shape-rendering: crishpEdges;
}
</style>
</head>
<h1 style = "text-align:center;">Example</h1>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="chart">
</div>
<script>
var data = [
{x: 5, y: "area1"
},
{x: 34, y: "area2"
},
{x: 19, y: "area3"
}
];
data.forEach(function(d){
d.x = +d.x;
d.y = d.y;
return console.log(data);
})
var m = {t:30, r:20, b:40, l:45 },
w = 600 - m.l - m.r,
h = 500 - m.t - m.b;
var x = d3.scale.linear()
.range([0, w])
.domain([0,d3.max(data, function(d){return d.x})]);
var y = d3.scale.ordinal()
.rangeRoundPoints([h-18,0])
.domain(data.map(function(d){return d.y;}));
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(8);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(3);
var svg = d3.select("#chart")
.append("svg")
.attr("width", w + m.l + m.r)
.attr("height", h + m.t + m.b)
.style("margin-left", "auto")
.style("margin-right", "auto")
.style("display", "block")
.append("g")
.attr("transform", "translate(" + m.l + "," + m.t + ")");
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("class", "circles")
.attr({
cx: function(d) { return x(d.x); },
cy: function(d) { return y(d.y); },
r: 8
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
</script>
</body>
</html>
为此首先创建一个工具提示div.
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
接下来在工具提示的CSS中添加样式
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
对于y轴上的工具提示,选择所有刻度mouseover和mouseout听众
yaxis.selectAll(".tick")[0].forEach(function(d1) {
var data = d3.select(d1).data();//get the data asociated with y axis
d3.select(d1).on("mouseover", function(d) {
//on mouse hover show the tooltip
div.transition()
.duration(200)
.style("opacity", .9);
div .html(data)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
//on mouse out hide the tooltip
div.transition()
.duration(500)
.style("opacity", 0);
});
})
在这里工作代码
希望这可以帮助!