html js鼠标悬停事件,鼠标悬停在轴标签d3.js javascript上的事件

有没有人知道是否有可能在y轴标签上有鼠标悬停事件？

例如,我在下面有一个散点图. y轴上的标签是“area1”,“area2”和“area3”.

当用户悬停标签“area1”时,将弹出工具提示以显示area1的描述.

我以前没有看到过这样的例子.有人知道怎么做吗？

非常感谢！

我这里也有一个龙头

http://plnkr.co/edit/wLjanxFWIzpxP0cbq6kK?p=preview

Plot

.axis path,

.axis line{

fill: none;

stroke: #000;

shape-rendering: crishpEdges;

}

Example

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);