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

2024年1月27日 348次阅读

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

HERE Plunker

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

我希望有些图纸更清晰：

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

我以为我可以在这一点上改变代码：

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

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

谢谢！

最佳答案
HERE MY PLUNKER

添加此liblary：

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

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

> D3可以在您穿上时保存数据
> D3可以根据类和id选择
> DOM元素可以保存属性(例如：attr-id)
>比例线性可以是反转,这意味着如果你有域,你可以有范围,如果你有范围你可以有域
>使用D3绘制的元素是可更新的&可删除
>了解你使用的liblary(d3-tip)

我改变了什么

>我将class和id添加到我想要选择的元素
>如果我想使用数据,我将数据保存到data-attribute
>我的功能是在折线图上跟踪我的鼠标,并反转它以获得价值
>我绘制我想要使用的对象提示

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

点赞