javascript - D3 鼠标同时在两个图形上移动

Question

如何同时捕获鼠标悬停在两个图形上的事件。我需要做如下图所示的事情:

任何人都可以指导我如何处理这个问题吗？。到目前为止，我能够让简单的鼠标悬停对单个图形起作用。

Answer 1

我是 function-plot 的作者它能够将事件分派(dispatch)到多个图形，例如，其中一个是 mouseover

var width = 300
var height = 180
var a = functionPlot({
  target: '#a',
  height: height,
  width: width,
  data: [{ fn: 'x^2' }]
})
var b = functionPlot({
  target: '#b',
  height: height,
  width: width,
  data: [{ fn: 'x' }]
})
a.addLink(b)
b.addLink(a)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/function-plot/1.16.5/function-plot.js"></script>

<span id="a" />
<span id="b" />

解决方案涉及让每个图形在触发特定事件时执行某些操作，例如 d3 调度事件的方式是

 // create a dispatcher with the events you will fire in the future
 var dispatch = d3.dispatch('mycustomevent');
 // add some callbacks (note the namespace)
 dispatcher.on('mycustomevent.graph1, function (str) {
    // when called str === 'hello world'
 })
 dispatcher.on('mycustomevent.graph2, function (str) {
    // when called str === 'hello world'
 })
 // fire the event from the dispatcher
 // the two callbacks attached are called in the same order
 dispatch.mycustomevent('hello world')

在实践中，每当您将鼠标悬停在图表上而不是立即执行操作时，您会触发一个自定义事件并让每个图表在鼠标悬停时做任何它需要做的事情

 // create a dispatcher
 var dispatch = d3.dispatch('mymouseover');

 function graphWrapper(graph) {
    return function (xCoord) {
       // do something with `xCoord` in `graph`
    }
 }
 dispatcher.on('mymouseover.graph1, graphWrapper(graph1))
 dispatcher.on('mymouseover.graph2, graphWrapper(graph2))

 // graph1 and graph2 need to fire the custom event
 function dispatchMouseOver() {
   var xCoord = x.invert(d3.mouse(this)[0])
   dispatch.mymouseover(xCoord)
 }
 graph1.on('mousemove', dispatchMouseOver)
 graph2.on('mousemove', dispatchMouseOver)

对于我修改的实现 an example made by d3's author由@In code veritas 引用，带有可重复使用的图表

a reusable graph with independent mouseover

如你所见，每个图都是相互独立的，在实现发布-订阅模式后，它看起来像这样

linked graphs

作为旁注，我基本上使用节点的事件模块在函数图中实现了这个功能，因为在 d3 中，您在同一命名空间下使用不同的名称添加了一个回调，例如mymouseover.1、mymouseover.2 等等，但在节点的事件模块中，您只需执行 graph.on('event', callback) 多个次

关于该主题的有用文章/演示

• https://bost.ocks.org/mike/chart/
• https://bl.ocks.org/mbostock/5872848
• https://bl.ocks.org/mbostock/3902569