如何使用来自 2 个数组的数据实现 D3 折线图的工具提示？答案

【问题标题】：How to implement tooltip for D3 line chart with data from 2 arrays?如何使用来自 2 个数组的数据实现 D3 折线图的工具提示？
【发布时间】：2013-08-29 14:38:06
【问题描述】：

我正在尝试实现一个包含多条线的 D3 图表，当将鼠标悬停在图表上时，该图表将每个点的样本大小显示为工具提示。我有两个数组的数据，但我不知道如何访问相对于图表上鼠标位置的第二个数组。

如何使用正确的索引访问第二个数组中的值？这是一个显示我需要修复的jsfiddle：js第60行的http://jsfiddle.net/fMXvv/1/，或如下所示的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.pageX 和一些奇怪的比例来映射到正确的坐标，但它似乎太复杂了......
你可以试试bl.ocks.org/DStruths/9c042e3a6b66048b5bd4的方法，但是你可能需要重构你的图数据

标签： javascript arrays d3.js data-visualization

【解决方案1】：

我使用 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; }

这是 jsfiddle - 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/

【讨论】：

【解决方案2】：

我遇到了一个可能和你类似的问题，我需要根据鼠标位置选择一个时间，这就是我所做的（可能会给你一些想法）：

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

【讨论】：