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

Question

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

HERE 笨蛋

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

我希望有一些图更清楚:

我认为此时我可以更改代码:

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

添加这个库:

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

要解决你的问题，你需要理解这个概念，

1. D3 戴上就能保存数据
2. D3可以根据class和id进行选择
3. DOM 元素可以包含属性(例如:attr-id)
4. Scale linear can be inversed，这意味着如果你有域，你就可以有范围，如果你有范围，你就可以有域
5. 用D3绘制的元素是可更新和可删除的
6. 了解您使用的库(d3-tip)

我改变了什么

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

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

3. 我制作函数在折线图上跟踪我的鼠标，并将其反转以获得值

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

read the code if you want to understand ask me which line you dont understand, if you need explanation