Question

我想创建一个基于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]坐标显示。

我可以单独进行散点图，但一直在努力将它们组合在一起。任何人都可以对此有所了解和/或提供一个最小的例子吗？

Answer 1

这个评论太长了，但我不确定它是否是您正在寻找的答案。您可能会发现的一个问题是嵌套数据的格式不同 - 一个使用x和y的JSON对象，而另一个使用两个点数组。

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

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

elem，width，height和data是核心参数：附加图表的元素，图表的大小以及数据图表（采用JSON对象格式）。

此功能将为图表生成所有必需的项目，并将图表添加到提供的元素。

然后，您希望绑定到主图表的mouseover，并且在该函数中，您必须进行一些数据修改，以将两个数组重新组织到JSON对象结构中。 / p>

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以匹配您希望工具提示的位置。

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

如果工具提示图表与主图表的风格明显不同，那么使用可扩展功能可能不是最佳选择，您可以改为创建另一个自定义函数。

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

1 个答案: