Ortak X'ler için çoklu Y ile Plotly.js'yi kullanarak bir dağılım grafiği oluşturma

Question

Bu, şu anda oluşturduğum grafiktir. İstediğim şekilde görünüyor, ama istediğim gibi davranmıyor.

Current Graph

Merhaba

, ben Plotly.js kullanarak serpme çizim oluşturmak çalışıyorum, ben belirteçler arabası olmak sorun yaşıyorum (ya da sadece yanlış bir şekilde kod yazdım).

Bu benim verileri biçimlendirme am nasıl benim geçerli kod:

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; 
 
}

Bu oldukça uzun (bunun için üzgünüm). Temel olarak, her bakteri için x ekseni olarak antibakteriyeller ve y ekseni olarak MIC'lerini kullanarak bir işaret oluşturdum. Bununla birlikte, verileri çizdiğimde, her bir işaretçinin, kendisiyle ilişkilendirilmiş verileri görüntülemek için üzerine gelmemize izin vermez. Sadece her X için (veya her antibakteriyel) bir işaretçinin üzerine gelmeme izin verecektir.

Bunu düzeltmenin bir yolu var mı? ya da sadece yanlış bir şekilde yaklaşıyorum.

Answer 1

Bence hovermode parametresini mizanpajınızdan kaçırıyorsunuz, fakat kodunuzu çalıştıramam, böylece test edemiyorum. eklemeyi deneyin:

layout = { 
    hovermode:'closest' 
}; 

İşte kullanımda hovermode parametresinin bir örnek: https://plot.ly/javascript/hover-text-and-formatting/