我正在尝试实现一个具有多行的D3图表,该图表在悬停在图表上时显示每个点的样本大小作为工具提示。我有两个数组的数据,但我不知道如何访问相对于鼠标在图表上的位置的第二个数组。
如何使用正确的索引访问第二个数组中的值?下面是一个jsfiddle,显示了我需要修复的内容:http://jsfiddle.net/fMXvv/1/在js的第60行,或者下面显示的div.html方法:
graph.append("svg:path").attr("d", line(data[0])).style("stroke", "black").style("stroke-width", 2)
.on("mouseover", function (d, i) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html("n = " + data[0][i])
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
困难在于图表有不止一个系列(3行),所以仅仅知道x坐标是不够的。
我使用d3.event.pageY使用比例:映射鼠标坐标
var toolTipScale = d3.scale.linear().domain([h + 80, 80]).range([0, max_value]);
然后使用:
div.html("n = " + Math.ceil(toolTipScale( d3.event.pageY)) )
要正确映射鼠标位置,需要添加css
body {
margin: 0;
padding: 0;
}
这是这个的小提琴——http://jsfiddle.net/cuckovic/sDnC8/
要访问第二个数组中的元素,可以使用d3.event.pageX:
var iScale = d3.scale.linear().domain([w + 80, 80]).range([data[0].length, 0]);
然后:
div.html("n = " + data[1][Math.floor(iScale( d3.event.pageX))] )
jsfiddle:http://jsfiddle.net/cuckovic/sDnC8/5/
我遇到了一个可能与您类似的问题,我需要根据鼠标位置选择时间,这就是我所做的(可能会给您一些想法):
var timeScale = d3.scale.linear()
.domain([startTime.getTime(), endTime.getTime()])
.range([30, r + 10])
.clamp(true);
axisOverlay.on("mousemove", mousemove)
.on("touchmove", mousemove);
function mousemove() {
selectedTime = new Date(timeScale.invert(d3.mouse(this)[1]));
}