使用帶有多個Y的Plotly.js創建散點圖，用於常見X的

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/