热图和迷你图上的链接工具提示

Question

我在热图旁边创建了一个热图和迷你图。

HERE Plunker

现在我希望当用户将鼠标悬停在热图的单元格上时，相应的迷你图上会显示一个红点。 另一方面，当用户将鼠标悬停在迷你图上时，会突出显示热图中的相应单元格。

我希望通过一些图纸更清楚：

我以为我可以在此时更改代码：

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

我应该跟踪鼠标所在的矩形，并以某种方式将这些数据传递给控制迷你线的代码片段。 但我真的不知道该怎么做，我也没有找到类似的例子。

谢谢！

Answer 1

HERE MY PLUNKER

添加此liblary：

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

要解决您的问题，您需要了解这个概念，

1. D3可以在您穿上时保存数据
2. D3可以选择基于类和id
3. DOM元素可以包含属性（Ex：attr-id）
4. 比例线性可以是反转，这意味着如果您有域名，则可以拥有范围，如果您有范围，则可以拥有域名
5. 使用D3绘制的元素是可更新的＆amp;可删除的
6. 了解您使用的图书馆（d3-tip）

我改变了什么


1. 我将class和id添加到我想要选择的元素

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

3. 我创建了在折线图上跟踪鼠标的功能，并将其反转以获得值

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

  

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