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

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對象結構。

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上的子圖表），但希望它將為您設定正確的方向。

如果工具提示圖表的樣式與主圖表相比明顯不同，則使用擴展功能可能不是最好的主意，而您可以創建另一個自定義功能。