在d3.js中的工具提示中绘图

Plot within a tooltip in d3.js

本文关键字：工具提示 绘图 js d3      更新时间：2024-05-04

我想创建一个基于d3的绘图，在工具提示中绘制绘图。不幸的是，我在网上没有找到任何例子。下面是一个示例JSON文件。

[{"x":[0.4],
  "y":[0.2],
  "scatter.x":[0.54,0.9297,0.6024,-1.9224,2.2819],
  "scatter.y":[0.4139,1.1298,-0.1119,2.3624,-1.1947]},
 {"x":[0.1],
  "y":[0.9],
  "scatter.x":[-0.8566,-0.5806,-0.9326,0.8329,-0.5792],
  "scatter.y":[-0.5462,-0.7054,1.0264,-3.4874,-1.0431]}]

这个想法是首先为（x，y）坐标绘制一个散点图。但是，当鼠标悬停在某个点上时，工具提示中会根据相应点的[stratter.x，scatter.y]坐标显示不同的散点图。

我可以单独绘制散点图，但一直在努力将它们组合在一起。有人能阐明这一点和/或提供一个最小的例子吗？

这太长了，无法发表评论，但我不确定这是否是您想要的答案。您可能会发现的一个问题是，嵌套数据的格式不同——一个使用带有x和y的JSON对象，而另一个使用两个点数组。

我的解决方案是创建一个可扩展的函数：

function makeScatterPlot(elem, width, height, data, fill)

elem、width、height和data是核心参数：将图表附加到哪个元素、图表的大小以及图表的数据（JSON对象格式）。

此函数将为图表生成所有必要的项目，并将图表添加到所提供的元素中。

然后，您需要绑定到主图表的mouseover，在该函数中，您必须进行一些数据修改，才能将两个数组重新组织到JSON对象结构中。

function mainMouseover(d){
  var newData = [];
  for (var i = 0; i < d["scatter.x"].length; i++){
    var t = {x: [0], y: [0]};
    t.x[0] = d["scatter.x"][i];
    t.y[0] = d["scatter.y"][i];
    newData.push(t);
  }
  var newG = mainG.append("g").attr("transform", "translate(200,200)");
  makeScatterPlot(newG, 100,100, newData, "red");
}

当然，您可以修改translate，使其与工具提示所在的位置相匹配。

把这些放在一起，你会得到以下（非常粗糙的）小提琴。将鼠标悬停在任一黑点上可以查看子图表。显然，这需要做大量的工作才能成为一个坚实的例子（即删除mouseout上的子图），但希望它能让你朝着正确的方向前进。

如果工具提示图表的样式与主图表明显不同，那么使用可扩展函数可能不是最好的主意，您可以创建另一个自定义函数。

相关文章：