根據兩個單獨的下拉選擇更新兩個不同的圖

Question

我正在做一個項目，我們有兩個單獨的下拉列表，其中包含 UFC 戰士的名字。 當在兩個下拉菜單中都選擇了一個名字時，應該會出現一個 plot，顯示我們隨着時間的推移可用於戰士 KD 的數據。 我正在為下拉列表中的選擇制作兩個單獨的圖。 我以前做過類似的事情（唯一的區別是我們只有一個下拉菜單而不是兩個），為了根據下拉菜單選擇更改 plot，我們使用了一個“optionsChanged”function，它鏈接到我們的 html。我現在的問題是我可以使 plot 工作並通過下拉選擇更改僅一個下拉菜單，但我不確定如何為第二個下拉菜單做同樣的事情。

這是 JavaScript 代碼，它使用“optionsChange”function 調用第二個 function 來生成繪圖。 顯示的名字是數據中的第一個戰士。

function init() {
  d3.json("http://127.0.0.1:5000/fighters").then(data => {

  // Drop down menu creation
  let dropdownMenu = d3.select("#selDataset");
  data.forEach((uniqueVarietyList) => {
  dropdownMenu.append('option').text(uniqueVarietyList)
 })

  let dropdownMenu2 = d3.select("#selDataset1");
  data.forEach((uniqueVarietyList) => {
  dropdownMenu2.append('option').text(uniqueVarietyList)
 })

 // Start at fighter option 0
 var result = data[0];

});

}


function optionChanged(fighter) {
 init(fighter);
 visuals(fighter);

}

這是 JavaScript 代碼，用於為一個下拉菜單的選定選項制作 plot

function visuals(fighter){
 console.log('fighter' , fighter)
 d3.json(`http://127.0.0.1:5000/combined/${fighter}`).then( data => { 
 let combined_data=data;
 console.log(data);
 console.log()

    
    let dte= [];
    let KD= [];

    for(var i = 0; i<combined_data.length; i++) {
      combined_data[i].avg_KD
      KD.push(combined_data[i].avg_KD);
    }
    console.log(KD);

    
    for(var i = 0; i<combined_data.length; i++) {
      combined_data[i].date
      dte.push(combined_data[i].date);
    }
    
    

    var data = [
      {
        x: dte,
        y: KD,
        type: 'histogram',
      marker: {
        color: '#C70039',
        line: {
          color:  "rgba(255, 100, 102, 1)",
          width: 1
        }
      },
      }
    ];
    let barLayout= {
      title: 'KD History',
      margin: {t:0},
      hovermode: "closest",
      xaxis: {title: 'Date'},
      yaxis: {title:'KD'},
      margin: {t:30}
    };
    Plotly.newPlot('bar', data,barLayout);


});
}

這是 html 代碼中的部分，其中包含繪圖和下拉列表。 主要感興趣的領域是兩個卡體類。

 <div class="row">
                <div class="col-sm-6">
                  <div class="card">
                    <div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
                      <img src="https://img.freepik.com/free-photo/kickboxer-with-overlays-his-hands-prays-before-fight_392761-4654.jpg?w=2000" class="img-fluid" />
                      <a href="#!">
                        <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
                      </a>
                    </div>

                    <div class="card-body">
                      <select id="selDataset" onchange="optionChanged(this.value)"></select>    
                      <h5 class="card-title">Athlete Name</h5>
                      <p class="card-text">With supporting text below as a natural lead-in to additional content.
                      <div id="sample-metadata" class="panel-body"></div>
                      </p>
                      <div id="bar"></div>
                      <!-- need an actaul button -->
                      <button onclick="fighter1()" class="btn btn-primary"> Athlete UFC Page Stats</button>
                      <!-- <a href="https://www.ufc.com/rankings" class="btn btn-primary">Athlete UFC Page Stats</a> -->
                    </div>

                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="card">
                    <div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
                      <img src="https://img.freepik.com/free-photo/mixed-martial-artist-wraps-bandages-around-his-fist-concept-mma-ufc-thai-boxing-classic-boxing-mixed-media_392761-2633.jpg?w=2000" class="img-fluid" />
                      <a href="#!">
                        <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
                      </a>
                    </div>

                    <div class="card-body">
                      <select id="selDataset1" onchange="optionsChanged(this.value)"></select>
                      <h5 class="card-title">Athlete Name</h5>
                      <p class="card-text">With supporting text below as a natural lead-in to additional content.
                      <div id="sample-metadata3" class="panel-body"></div>
                      </p>
                      <div id="bar2"></div>
                      <button onclick="fighter2()" class="btn btn-primary"> Athlete UFC Page Stats</button>
                      <!-- <a href="#" class="btn btn-primary">Athlete UFC Page Stats</a> -->
                    </div>

                  </div>
                </div>
            </div>

Ps: plot function 與下拉列表在不同的 Js 文件中，選項已更改 function 這是我們頁面的樣子，選項更改僅適用於一個下拉選擇

Answer 1

我想我明白了。

我在第一個 js 腳本中添加了第二個 function，“optionsChanged”

function init() {
 d3.json("http://127.0.0.1:5000/fighters").then(data => {
 // Drop down menu creation
 let dropdownMenu = d3.select("#selDataset");
 data.forEach((uniqueVarietyList) => {
   dropdownMenu.append('option').text(uniqueVarietyList)
 })
 let dropdownMenu2 = d3.select("#selDataset1");
 data.forEach((uniqueVarietyList) => {
   dropdownMenu2.append('option').text(uniqueVarietyList)
 })

 // Start at fighter option 0
 var result = data[0];

});

}

function optionChanged(fighter) {
 init(fighter);
 visuals(fighter);

}
function optionsChanged(fighterr) {
 init(fighterr);
 visuals2(fighterr);

}

在帶有 plot 的第二個 js 腳本中，我制作了第二個 function，就像第一個 function 一樣，只是將變量從“fighter”更改為“fighter”。

function visuals(fighter){
 console.log('fighter' , fighter)
 d3.json(`http://127.0.0.1:5000/combined/${fighter}`).then( data => { 
 let combined_data=data;
 console.log(data);
 console.log()


let dte= [];
let KD= [];

for(var i = 0; i<combined_data.length; i++) {
  combined_data[i].avg_KD
  KD.push(combined_data[i].avg_KD);
}
console.log(KD);


for(var i = 0; i<combined_data.length; i++) {
  combined_data[i].date
  dte.push(combined_data[i].date);
}



var data = [
  {
    x: dte,
    y: KD,
    type: 'histogram',
  marker: {
    color: '#C70039',
    line: {
      color:  "rgba(255, 100, 102, 1)",
      width: 1
    }
  },
  }
];
let barLayout= {
  title: 'KD History',
  margin: {t:0},
  hovermode: "closest",
  xaxis: {title: 'Date'},
  yaxis: {title:'KD'},
  margin: {t:30}
};
Plotly.newPlot('bar', data,barLayout);


});
}

function visuals2(fighterr){
 console.log('fighter' , fighterr)
 d3.json(`http://127.0.0.1:5000/combined/${fighterr}`).then( data => { 
 let combined_data=data;
 console.log(data);
 console.log()


let dte= [];
let KD= [];

for(var i = 0; i<combined_data.length; i++) {
  combined_data[i].avg_KD
  KD.push(combined_data[i].avg_KD);
}
console.log(KD);


for(var i = 0; i<combined_data.length; i++) {
  combined_data[i].date
  dte.push(combined_data[i].date);
}



var data = [
  {
    x: dte,
    y: KD,
    type: 'histogram',
  marker: {
    color: '#C70039',
    line: {
      color:  "rgba(255, 100, 102, 1)",
      width: 1
    }
  },
  }
];
let barLayout= {
  title: 'KD History',
  margin: {t:0},
  hovermode: "closest",
  xaxis: {title: 'Date'},
  yaxis: {title:'KD'},
  margin: {t:30}
};
Plotly.newPlot('bar2', data,barLayout);


});
}

html 腳本保持不變。

這就是新解決方案的樣子，每個下拉列表都按照我的預期更新彼此獨立的單獨圖。