如何用來自2個數組的數據實現D3折線圖的工具提示？

Question

我正在嘗試實現一個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坐標是不夠的。

Answer 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/

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