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

我想创建一个基于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）坐标的散点图。但是，当鼠标悬停在某个点上时，工具提示中会根据相应点的[scatter.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");
}

函数mainMouseover（d）{
var newData=[]；
对于（var i=0；i

当然，您可以修改

translate

，使其与工具提示的位置相匹配

把这些放在一起，你会得到以下结果（非常粗糙）。将鼠标悬停在任一黑点上以查看子图表。显然，这需要大量的工作才能成为一个可靠的示例（即删除

mouseout

上的子图表），但希望它能为您指明正确的方向

---

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

我明白您关于数据重组的观点，这是有道理的。我会试着这样做，看看效果如何。谢谢。这确实帮了我的忙：我现在有了一个我想做的原型。我将一个子类归因于（scatter.x，scatter.y）图，以便在mouseout上消除它。