Question

这是我目前创建的图表。它看起来就像我想要的那样，但它的行为并不像我想要的那样。

您好，我正在尝试使用Plotly.js创建一个散点图，并且我遇到了标记错误的问题（或者我只是以错误的方式编写代码）。

这是我目前关于如何格式化数据的代码：

＆＃13;

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

＆＃13;

很长（对不起）。基本上，我使用抗菌剂作为x轴为每个细菌创建了一个标记，并将它们的MIC作为y轴。

但是，当我绘制数据时，它不允许我将鼠标悬停在每个标记上以显示与其关联的单个数据。它只允许我将鼠标悬停在每个X（或每种抗菌剂）的一个标记上。

有没有办法解决这个问题？或者我只是以错误的方式接近它。

Answer 1

我认为你错过了你的布局中的hovermode参数，但是我无法让你的代码运行所以我无法测试它。尝试添加：

layout = {
   hovermode:'closest'
};

以下是正在使用的hovermode参数示例：https://plot.ly/javascript/hover-text-and-formatting/

使用Plotly.js创建散点图，其中多个Y用于常见的X＆＃39

1 个答案: