dc.js - 從圖表之外圖表

我想找創建類似於以下示例的疊層線圖顯示鼠標懸停值：dc.js - 從圖表之外圖表

https://dc-js.github.io/dc.js/

然而，除了我想上面的一個場顯示鼠標懸停的當前值的圖形。

I.e.而不必在圖表上用光標暫停一秒鐘，然後讓鼠標懸停在框上，我希望這些值能夠顯示在圖表外部，類似於他們在Google財經中的做法（請參閱價格當鼠標懸停時，圖形左上角的vol會發生變化）。例如。 https://www.google.com/finance?q=apple&ei=MUiWVtnQIdaP0ASy-6Uo

我真的很感謝任何信息社區可以分享什麼是最好的方式來解決這個問題。

來源

2016-01-13 TheBlake

您可以通過將自己的鼠標懸停/鼠標懸停事件添加到圖表中的點來完成此操作。我添加了一個.display-qux跨度圖表DIV中：

<div id="monthly-move-chart"> 
    ... 
    <span class="display-qux"></span> 
</div>

但當然也可能是別的地方，這只是更容易選擇的這個例子。

然後使用renderlet事件，該事件被觸發每一個渲染後添加鼠標事件和每一個重繪：

.on('renderlet', function(chart) { 
     chart.selectAll('circle.dot') 
      .on('mouseover.foo', function(d) { 
       chart.select('.display-qux').text(dateFormat(d.data.key) + ': ' + d.data.value); 
      }) 
      .on('mouseout.foo', function(d) { 
       chart.select('.display-qux').text(''); 
      }); 
    });

的.foo是一個事件的命名空間，以避免內部使用這些事件的干擾。你應該在這裏使用一個與你想要做的事情相關的詞。 Documentation on event namespaces is here.

輸出示例：

過程可用於添加事件的其他圖表相同，但例如，你會selectAll('rect.bar', ...爲條形圖等

來源

2016-01-14 19:41:18 Gordon

太謝謝你了戈登！正是我在找什麼！我只想澄清'.foo是一個事件命名空間，以避免干擾這些事件的內部使用'。所以你在說什麼 - 如果我剛剛接觸到這個，那麼請糾正我的錯誤 - 實際上.foo是你用來避免'顯示'類的可能性的標籤已經可以採取......即只是一個任意的單詞來確保我們正在訪問一個具有唯一類的特定元素？是對的嗎？ – TheBlake

這是一個任意的標籤，以確保我們的事件處理程序不會取代任何其他標籤。事件名稱空間與用於查找我們正在更新的範圍的類無關 - 我將編輯我的答案以反映這一點。 – Gordon

真棒，感謝您的澄清！ – TheBlake

dc.js - 從圖表之外圖表

回答

相關問題