热力图和火花线上的关联提示

Question

我创建了一个热力图和热力图旁边的火花线图。 这里是Plunker链接。

现在，当用户悬停在热力图的单元格上时，希望对应的火花线图上显示一个红点。另一方面，当用户悬停在火花线图上时，希望高亮显示热力图中相应的单元格。

希望通过一些绘图使问题更加清晰：

我原以为我可以在这个地方更改代码：

var cells = svg.selectAll('rect')
    .data(data)
    .enter()
    .append('g')
    .append('rect')
    //...
    .on('mouseover', tip.show) // <- HERE
    .on('mouseout', tip.hide);

我应该跟踪鼠标所在的矩形，并将这些数据传递给控制火花线的代码。但我不知道如何做，也没有找到类似的示例。

谢谢！

- user7558372

Answer 1

这里是我的 Plunker

添加这个库：

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

为解决问题，您需要理解以下概念：

1. 在放入数据时，D3 可以保持其。
2. D3 可以根据类和 ID 进行选择。
3. DOM 元素可以保存属性（例如：attr-id）。
4. 线性刻度可以倒置，这意味着如果您有区域，则可以拥有范围；如果您有范围，则可以拥有区域。
5. 通过 D3 绘制的元素可更新且可删除。
6. 了解您使用的库（d3-tip）。

我的更改

1. 我将要选择的元素添加了类和 ID。

2. 如果我想使用数据，我将数据保存到数据属性中。

3. 我创建了一个函数来跟踪我的折线图上的鼠标，并将其倒置以获取值。

4. 我绘制了我想要使用的提示对象。

如果您想要了解，请阅读代码。如果您需要解释，请问我哪一行您不理解。

- KEKUATAN