Focus +上下文通過刷鼠標放大問題

Question

完整的代碼在jsfiddle。 問題是當放大頂部和底部圖表中的鼠標懸停不匹配時，即在底部移動圓圈不應超出通過刷牙選擇的區域。我更新的移動要點如下：

focus.on "mousemove",() -> 
    xPos = d3.mouse(this)[0] 
    updateMovingPoints(xPos) 
    context.on "mousemove",() -> 
    xPos = d3.mouse(this)[0] 
    updateMovingPoints(xPos) 

正如你看到的，底部的鼠標懸停不匹配上圖，即超越放大區域。

Answer 1

我的解決方法基本上是採用AmeliaBR的建議到XPOS從一個X級轉換爲其他的，這一點我用用xScale(xScale2.invert(xPos))，然後通過這個修改的X位置updateMovingPoints

scale.invert在D3的時間尺度變回從原始數據（文檔here），我們可以迅速地重新規模，日期轉換爲SVG使用不同的比例

這裏x座標是小提琴：http://jsfiddle.net/henbox/pusauc5q/10/

首先我分裂updateMovingPoints函數分成兩個updateMovingPointsTop和updateMovingPointsbottom，因爲更新底部（上下文）圖表總是很容易，而更新頂部（焦點）是棘手的一點。

updateMovingPointsTop = (xPos) ->  
    focusLine1 = focus.select(".line1").attr("d", line1(data)) 
    focusLine2 = focus.select(".line2").attr("d", line2(data)) 
    updatePointPosition(xPos, focusLine1, focusCircles[0]) 
    updatePointPosition(xPos, focusLine2, focusCircles[1]) 

    updateMovingPointsBottom = (xPos) ->  
    contextLine1 = context.select(".line1").attr("d", line3(data)) 
    contextLine2 = context.select(".line2").attr("d", line4(data)) 
    updatePointPosition(xPos, contextLine1, contextCircles[0]) 
    updatePointPosition(xPos, contextLine2, contextCircles[1]) 

這樣，只有在底部（上下文）mousemoving的時候，我想要做一些計算找到底部xPos應如何翻譯成頂的X級：

updateMovingPointsTop(calculatexPosTop(xPos)) 

的calculatexPosTop函數本身有一些註釋來解釋。但基本上，它將xPos從底部x尺度轉換爲頂部x尺度，並且如果位於邊界之外，則將其設置爲該頂部尺度的範圍的最小\最大值。該範圍從range計算當秤定義：

# The min and max extents (x coords) of the 'context' (top chart) 
xScaleTopRange = xScale.range() 
minExtent = xScaleTopRange[0] 
maxExtent = xScaleTopRange[1] 

，關鍵calculatexPosTop功能如下：

# When mousemoving on the bottom chart, calculate where the equivaluent point is on the top chart 
calculatexPosTop = (xPos) -> 
    # The translation of the 'context' x-scale (xScale2) to the 'focus' x-scale (xScale) 
    # Note that when there's no zooming, xScale and xScale2 are the same so xPosInFocusScale = xPos 
    xPosInFocusScale = xScale(xScale2.invert(xPos)) 
    # Check if the translated point lies outside the extents of the focus scale's range 
    if xPosInFocusScale < minExtent 
    minExtent 
    else if xPosInFocusScale > maxExtent 
    maxExtent 
    else 
    xPosInFocusScale 

編輯

我意識到我缺少的一部分解決方案：放大時，沿着頂部圖表移動並不能保持刷點區域內的點。小提琴鏈接現在更新此修復程序。

這涉及附加其它功能calculatexPosBottom，非常類似於calculatexPosTop，但不是使用scale.range得到最大和最小的程度，我用brush.extent()在brushed功能找到拉絲區域的「大小」：

# Get the x-limits of the brush 
brushExtent = brush.extent() 
# Convert using the x-scale to get SVG coordinates 
minBrushExtent = xScale2(brushExtent[0]) 
maxBrushExtent = xScale2(brushExtent[1]) 

...然後我用畫筆最小\最大程度上是這樣的：

calculatexPosBottom = (xPos) -> 
    xPosInContextScale = xScale2(xScale.invert(xPos)) 
    # Check if there is no brushed area (ie the extent is [0, 0]) 
    # The brush extent is defined in the 'brushed' function 
    if minBrushExtent == maxBrushExtent 
    # If there is no brush, just use the same points on both scales 
    xPos 
    else if xPosInContextScale < minBrushExtent 
    minBrushExtent 
    else if xPosInContextScale > maxBrushExtent 
    maxBrushExtent 
    ...