javascript - 将平行坐标链接到图像并在该图像中进行更改

Question

想象一下我有一组图像（图像数量：N），每个图像中有几个圆圈。

我使用图像处理算法从每张图像中提取了 10 个特征。在这 10 个特征中，我有该特定圆的中心坐标（cx 和 cy）。

对于其中有 m 个圆圈的特定图像，我将有一个 m x 10 的数组（m 是该图像中的圆圈数）。所以结果将是一个 N*m x 10 的数组。

我使用 D3 编写了一个 Javascript 代码，它为这 8 个特征（不是 cx 和 cy）绘制平行坐标。现在，我想为我的平行坐标添加一个特定的功能，通过悬停在不同的线（不同的圆圈）上，显示相关的图像，并且可以识别图像中特定圆圈的中心。请看下图。

我不知道是否可以使用 Javascript 和 D3。如果有人能帮助我解决这个问题或给我一个类似的例子，我将不胜感激。

先感谢您。

Answer 1

是的，完全有可能。由于我没有 JSFiddle 或代码示例，我将提供一些高级想法：

1. 图像上的圆圈非常直截了当。只需在 <img> 标签中渲染图像。用透明背景覆盖画布并绘制所有圆形/椭圆形。

2. 我相信您对每个圆圈都使用了 SVG 路径（穿过每个特征值的线）。在鼠标悬停时获取 SVG 路径元素的句柄。确定有问题的圆圈的索引。

3. 获得索引后，查找 (cx, cy) 并在画布中渲染圆的中心。在 mouseout 上，删除中心星号。

希望有帮助！