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

我在热图旁边创建了一张热图和一些小图片

暴徒

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

我希望通过一些图纸可以更清楚地看到：

我想我可以在这一点上更改代码：

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

var cells=svg.selectAll（'rect'）
.数据（数据）
.输入（）
.append（'g'）
.append（'rect'）
//...
.on（'mouseover'，tip.show）/


添加此库：

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



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

当你把数据放在D3上时，它可以保存数据
D3可以根据类别和id进行选择
DOM元素可以保存属性（例如：attr id）
比例线性可以是相反的，这意味着，若你们有域，你们可以有范围，若你们有范围，你们可以有域
使用D3绘制的元素是可更新和可删除的
了解你使用的图书馆（d3提示）
我改变了什么

我向要选择的元素添加类和id

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

我做了一个函数，在折线图上跟踪我的鼠标，并将其反转以获得值

我画了我想使用的对象提示

阅读代码，如果你想理解，问我哪一行你不明白，如果你需要解释