通過刷過鼠標懸停焦點和上下文縮放問題

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比例轉換為另一x比例，這是我使用xScale(xScale2.invert(xPos)) ，然后將此修改后的x位置傳遞給updateMovingPoints

D3時標上的scale.invert從原始數據（ 此處為文檔）中獲取日期，我們可以立即對其進行重新縮放，以使用不同的比例將其轉換為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])

然后，僅當鼠標在底部（上下文）上移動時，我才想進行一些計算，以找出應如何將底部xPos轉換為頂部x比例尺：

updateMovingPointsTop(calculatexPosTop(xPos))

該calculatexPosTop函數本身有一些注釋來解釋。 但基本上，它將xPos從底部x縮放轉換為頂部x縮放，如果超出范圍，則將其設置為該頂部縮放的范圍的min \\ max。 的邊界被從計算出的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])

...然后我使用畫筆min \\ max范圍，如下所示：

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
    ...