一般的なXのPlotly.jsを複数のYで使用して散布図を作成する

Question

これは私が現在作成したグラフです。 私はそれが欲しいと思う方法を見ますが、それは私がそれを望むように振る舞いません。

Current Graph

こんにちは、私はPlotly.jsを使用して散布図を作成しようとしています、と私は、マーカーはバグがあることに問題が生じています（または私は間違った方法でコードを書いています）。

これは私がデータをフォーマットしていますどのように私の現在のコードです：

var formatData2 = function(antibacData) { 
 
    console.log("Data formatting begins now ---------------"); 
 
    var plotData = {}; 
 
    var antibiotics = { 
 
     neomycin: [], 
 
     penicilin: [], 
 
     streptomycin: [] 
 
    }; 
 
    var gramstain = []; 
 
    
 
    antibacData.forEach(function(d) { 
 
     if (d != null) { 
 
      var gramStain; 
 
      // Converts gramstain string data to boolean 
 
      if (d["Gram Staining "] == "positive") { 
 
       gramStain = "rgba(102, 51, 153, 0.7)"; 
 
      } else { 
 
       gramStain = "rgba(255, 47, 47, 0.7)"; 
 
      } 
 
      
 
      plotData[d["Bacteria "]] = { 
 
       stain : gramStain, 
 
       neomycin : d["Neomycin"], 
 
       penicilin : d["Penicilin"], 
 
       streptomycin : d["Streptomycin "] 
 
      }; 
 
     } 
 
    }); 
 
    var keys = Object.keys(antibiotics); 
 
    var bactName = Object.keys(plotData); 
 
    console.log(keys); 
 
    console.log(bactName); 
 
    
 
    antibacData.forEach(function(d) { 
 
     antibiotics.neomycin.push(d["Neomycin"]); 
 
     antibiotics.penicilin.push(d["Penicilin"]); 
 
     antibiotics.streptomycin.push(d["Streptomycin "]); 
 
    }); 
 
    console.log(antibiotics); 
 
    
 
    var name1 = new Array(16).fill('Neomycin'); 
 
    var name2 = new Array(16).fill('Penicilin'); 
 
    var name3 = new Array(16).fill('Streptomycin'); 
 
    
 
    var group1 = { 
 
     x: name1, 
 
     y: antibiotics.neomycin, 
 
     name: 'Neomycin', 
 
     mode: 'markers', 
 
     type: 'scatter', 
 
     text: bactName 
 
    }; 
 

 
    var group2 = { 
 
     x: name2, 
 
     y: antibiotics.penicilin, 
 
     name: 'Penicilin', 
 
     mode: 'markers', 
 
     type: 'scatter', 
 
     text: bactName 
 
    }; 
 
    
 
    var group3 = { 
 
     x: name3, 
 
     y: antibiotics.streptomycin, 
 
     name: 'Streptomycin', 
 
     mode: 'markers', 
 
     type: 'scatter', 
 
     text: bactName 
 
    }; 
 
    
 
    var resultData = [group1, group2, group3]; 
 
    
 
    console.log("Data formatting ends now -----------------"); 
 
    
 
    return resultData; 
 
}

は、それはかなり長いです（そのことについて申し訳ありません）。 基本的には、抗菌剤をx軸、MICをy軸とした各細菌のマーカーを作成しました。

しかし、データをプロットすると、各マーカーにマウスを合わせると、それに関連付けられた個々のデータが表示されません。それは、各X（または各抗菌剤）のマーカーの上にマウスを置くことだけが可能になります。

これを修正する方法はありますか？またはちょうど間違った方法でそれに近づいていますか？

Answer 1

レイアウトからhovermodeパラメータが不足していると思いますが、テストすることができないようにコードを実行することができません。追加してみてください：

layout = { 
    hovermode:'closest' 
}; 

ここで使用されているhovermodeパラメータの例です：https://plot.ly/javascript/hover-text-and-formatting/