javascript - plotly.js 的跟踪动态分配？

Question

我目前正忙于一个全栈项目，用于工作和使用 js 以及我构建的 API。这个项目将是一个仪表板，供员工查看与我们团队相关的某些统计数据，因此有 plotly.js 图表......很多图表。

一个要点是它需要是动态的，所以我有这个 API 来提供通过下拉菜单选择的数据，然后输入到图形生成器中。到目前为止，这很有效，除了因为它们都在一个痕迹中，它们都是相同的颜色。那么有没有办法找到特定列中的唯一字符并使用它们来分配痕迹？

数据的缩减版本如下所示：

[{"sample_id":"Buf1_1","manual_interventions":4011,"prefix_sl":"a"}, 
 {"sample_id":"Ser1_1","manual_interventions":256,"prefix_sl":"a"}, 
 {"sample_id":"Uni1_1","manual_interventions":179,"prefix_sl":"a"}, 
 {"sample_id":"Tem1_1","manual_interventions":996,"prefix_sl":"a"}, 
 {"sample_id":"Biv1_3","manual_interventions":264,"prefix_sl":"a"}]

上面的每一个都是下面代码中的变量一、二和三。

prefix_sl 也可以是字母表中的任何字母，再加上它可以用 prefix_dl （两个字母的字母分配）或 prefix_fn （两栖动物，昆虫等）交换出来，这就是我寻找动态方法的原因. 图形生成代码如下，每次更改三个下拉菜单时都会激活。

TESTER = document.getElementById('test');

function makegraph() {

    var one = document.getElementById('MainGraphSelector1X');
    one = one.options[one.selectedIndex].value
    var two = document.getElementById('MainGraphSelector1Y');
    two = two.options[two.selectedIndex].value
    var three = document.getElementById('MainGraphSelector1C');
    three = three.options[three.selectedIndex].value

    var url = 'http://localhost:3000/gritdata?select='+one+','+two+','+three

    d3.json(url, function (error, data) {
        if (error) return console.warn(error);
        var x = [];
        var y = [];
        var c = []

        data.forEach((item) => {
            x.push(item[one]);
            y.push(item[two]);
            c.push(item[three]);
        });
        var trace1 = {
            type: 'scatter',
            x: x,
            y: y,
            mode: 'markers',
            name: 'Percent of estimated voting age population',
            marker: {
                color: c,
                line: {width: 1,},
                symbol: 'circle',
                size: 5
            }
        };

        var datas = [trace1];

        var layout = {
            title: 'Graph showing '+ one + ' and ' + two + ' coloured by ' + three,
            xaxis: {
                showgrid: false,
                showline: true,
                linecolor: 'rgb(102, 102, 102)',
                titlefont: {font: {color: 'rgb(204, 204, 204)'}},
                tickfont: {font: {color: 'rgb(102, 102, 102)'}},
                autotick: true,
                dtick: 10,
                ticks: 'outside',
                tickcolor: 'rgb(102, 102, 102)'
            },
            margin: {
                    l: 25,
                    r: 0,
            },
            legend: {
                font: {size: 8,},
                yanchor: 'middle',
                xanchor: 'right'
            }
        };
        var config = {responsive: true, displayModeBar: true}
        Plotly.react('test', datas, layout, config);
        }
    )
}
makegraph()

目前这会产生：

但就像我说过的，所有前缀分配都需要一种独特的颜色。

这是否可以通过某种方式实现：

list = []
list2 = []
for i in column:
    if i not in list:
        list.append(i)
    else:
         pass

for i in list:
    trace_i = {           
        type: 'scatter',
        x: x,
        y: y,
        mode: 'markers',
        name: 'Percent of estimated voting age population',
        marker: {
            color: c,
            line: {width: 1,},
            symbol: 'circle',
            size: 5
        }
       }
    list2.append(trace_i)

然后可以将此跟踪列表传递给 plotly.react()

我试过实现这样的东西，但看到我对 javascript 的了解非常有限，我不得不抽出时间远离这个，我觉得有点像穴居人......很好地尝试阅读 javascript。

如果有人可以帮助我，那将是惊人的，谢谢。

标签： javascriptdynamic-programmingplotly.js