共通データ13の使用(Compare Cityの変更)

既存コンテンツ(Compare City.html、Compare City.js)

既存の方法は、2つのデータを比較することです.

新しい意味

この二つの都市以外の多くの都市が実行可能かどうかについて意見を提出し、それを適用するためにDanfo.js公式サイトを検索しました.

let a = {
    		'pig': [20, 18, 489, 675, 1776], 
  		'horse': [1000, 25, 281, 600, 1900],
  		'ppp':[10,2,2,3,4]
    	}
        df = new dfd.DataFrame(a, {index: [1990, 1997, 2003, 2009, 2014]})
        df.plot("plot_div").line()

このように、オブジェクトにpropertyと値を入れて出力するのも正常に動作します.->すなわち、正しいキーと値を持つPropertyのみが存在する場合、複数の結果を同時に表示することができる.

修正コード(既存コード)

既存のコード

import {url} from './Data.js'
let input1 = document.getElementById('city1')
let input2 = document.getElementById('city2')
let button = document.getElementById('but');

button.addEventListener('click',getServerData);

function getServerData() {

    async function load() {
      try {
        const get_date = [];
        const get1 = [], get2 = [];
        let city_index1, city_index2;
        let city_name1 = input1.options[input1.selectedIndex].text;
        let city_name2 = input2.options[input2.selectedIndex].text;

        const datas = await Promise.all(setDate().map(date => {
            return dfd.read_csv(`${url}${date}.csv`)
          }
        ));         //모든 데이터 값 읽어오기

        datas[0].body__items__item__gubun.data.forEach((data) => {
          if (data == city_name1)
            city_index1 = datas[0].body__items__item__gubun.data.indexOf(data);
          if (data == city_name2)
            city_index2 = datas[0].body__items__item__gubun.data.indexOf(data);
        });         //해당 지역을 가진 index 찾기

        datas.forEach(data => {
          get1.push(data.body__items__item__incDec.data[city_index1]);
          get2.push(data.body__items__item__incDec.data[city_index2]);
          get_date.push(data.body__items__item__stdDay.data[0]);
        })      //해당 지역을 가진 index를 통해 날짜별 증가량 배열에 저장

        let df_sum1 = new dfd.DataFrame({city_name1: get1, city_name2: get2}, {index: get_date});  //df_sum은 Series 형태이므로 DataFrame 형태로 변환
        df_sum1.plot('plot').line();        // 각각의 지역의 증가량 출력
      }
      catch(err){
        alert('데이터가 존재하지 않거나 잘못되었습니다.');
      }
    }

  load();
}

function setDate(){
  let input = document.getElementById('input')
  let days = document.getElementById('days');
  let returnDay = checkDuring(days.options[days.selectedIndex].text);
  let tDate = new Date(input.value); // 2020년 03월 04일 부터 시작
  let Year,Month,Day;                 // 각 날짜별 날짜 생성
  const date_array = [];              // 해당 필요부분 넣을 배열 생성

  for(let i=0;i<returnDay;i++)
  {
    tDate.setDate(tDate.getDate()+1)        // 3월 4일 계산 후 하루씩 증가
    let stringMonth = (tDate.getMonth()+1).toString();
    Year = tDate.getFullYear().toString().slice(2,4);       // 2020년이 아닌 뒤의 두자리 수만 필요하므로 slice 사용
    Month = stringMonth.length==1 ? '0' + stringMonth.toString() :stringMonth.toString() ; // 한자리 수 인경우 앞에 0을 붙인다.
    Day = tDate.getDate().toString().length==1? '0'+tDate.getDate().toString() : tDate.getDate().toString();
    date_array.push(Year+Month+Day);    //합친 내용을 배열로 만들어 준다.
  }

  return date_array;     //해당 배열을 반환한다.
}

function checkDuring(day){
  const $sample = {
    '1주일' : 7,
    '2주일' :  14,
    '3주일' : 21,
    '한달' : 30
  }
  return $sample[day];
}

正直に言うとちょっと散らかっています簡単に修正し、新しい意図の値を追加できます.

コードの変更(コードの変更)

import {url} from './Data.js'
const cityTag = document.getElementById('city')
const addButton = document.getElementById('addButton');
const cityTitle = document.querySelector('.cityMember');
let button = document.getElementById('but');

let cityMember=[];

const addEventListener1 = ()=>{
  cityTitle.insertAdjacentHTML('beforeend',`<button type="button" class="m-1 btn btn-primary">${cityTag.value}</button>`);
  cityMember.push(cityTag.value)
}

addButton.addEventListener('click',addEventListener1);
button.addEventListener('click',getServerData);

function getServerData() {
  async function load() {
    try {
      let cityIndex =[],getDate=[];
      let totalContent={};

      const datas = await Promise.all(setDate().map(date => {
          return dfd.read_csv(`${url}${date}.csv`)
        }
      ));         //모든 데이터 값 읽어오기

      addCityIndex(datas,cityMember,cityIndex); //해당 지역을 가진 index 찾기
      checkIndex(datas,cityIndex,totalContent); //해당 지역을 가진 인덱스마다의 객체의 프로퍼티인 배열에 값을 넣는다
      addCityDate(datas,getDate);               //해당 지역을 가진 index를 통해 날짜 배열인 get_date저장

      const df_sum1 = new dfd.DataFrame(totalContent, {index: getDate});  // totalContent와 날짜인 get_date를 통해 df_sum 생성
      df_sum1.plot('plot').line();      //결과 출력

      // 해야할 부분 : 추가한 도시 버튼 클릭시 삭제기능 구현 , 전반적 코드 정리 필요

    }
    catch(err){
      alert('데이터가 존재하지 않거나 잘못되었습니다.');
    }
  }
  load();
}

const addCityIndex = (datas,cityMember,cityIndex)=>{
  datas[0].body__items__item__gubun.data.forEach((data) => {
    if (cityMember.indexOf(data) !== -1)
      cityIndex.push(datas[0].body__items__item__gubun.data.indexOf(data))
  });
}


const checkIndex = (datas,cityIndex,totalContent)=>{
  datas[0].body__items__item__gubun.data.forEach((data) => {
    cityIndex.map(index=>{
      if(data === datas[0].body__items__item__gubun.data[index])   //해당 지역을 가진 인덱스라면
        pushValue(totalContent,datas,data,index); //객체의 프로퍼티인 배열에 값을 추가
    })
  });
}

const pushValue = (totalContent,datas,data,index)=>{
  for(let i=0;i<datas.length;i++) {
    if(i===0)     //첫값은 배열 형태로 넣고
      totalContent[data] = [datas[i].body__items__item__incDec.data[index]];
    else          //배열형태이므로 나머지는 push메소드를 이용해 넣는다.
      totalContent[data].push(datas[i].body__items__item__incDec.data[index]);
  }
}

const addCityDate = (datas,getDate)=>{
  datas.forEach(data => {
    getDate.push(data.body__items__item__stdDay.data[0]);
  })
}

const setDate = ()=>{
  let input = document.getElementById('input')
  let days = document.getElementById('days');
  let returnDay = checkDuring(days.options[days.selectedIndex].text);
  let tDate = new Date(input.value); // 2020년 03월 04일 부터 시작
  let Year,Month,Day;                 // 각 날짜별 날짜 생성
  const date_array = [];              // 해당 필요부분 넣을 배열 생성

  for(let i=0;i<returnDay;i++)
  {
    tDate.setDate(tDate.getDate()+1)        // 3월 4일 계산 후 하루씩 증가
    let stringMonth = (tDate.getMonth()+1).toString();
    Year = tDate.getFullYear().toString().slice(2,4);       // 2020년이 아닌 뒤의 두자리 수만 필요하므로 slice 사용
    Month = stringMonth.length==1 ? '0' + stringMonth.toString() :stringMonth.toString() ; // 한자리 수 인경우 앞에 0을 붙인다.
    Day = tDate.getDate().toString().length==1? '0'+tDate.getDate().toString() : tDate.getDate().toString();
    date_array.push(Year+Month+Day);    //합친 내용을 배열로 만들어 준다.
  }
  return date_array;     //해당 배열을 반환한다.
}

const checkDuring = (day) => {
  const $sample = {
    '1주일' : 7,
    '2주일' :  14,
    '3주일' : 21,
    '한달' : 30
  }
  return $sample[day];
}

getServerData()の部分は、以前のコードと比較して著しく減少した.(分離関数)

コード解析

getServerData() : await Promise.all関数とsetDate関数を使用して、対応する日付を持つすべてのデータを取得します.(これらのデータは、日付範囲によって異なる数の配列です.)
●週基準

●1週間と2週間基準(データは各7個14個)
addCityIndex,checkIndex,addCityDate関数実行後、データからconst df_sum1 = new dfd.DataFrame(totalContent, {index: getDate}); df sumを生成し、df_sum1.plot('plot').line();を介して出力する.
addCityIndex:名前の通り、配列値に追加された都市にインデックス値を追加します.
checkIndex:追加されたインデックス値をチェックし、インデックス(領域)に関するデータを取得し、毎日の確診者をキーで都市としてtotalContentオブジェクトに追加し、配列で各日付を追加します.
addCityDate:指定した間隔でアレイを介して時間を格納します.
このデータから得られたtotalContentおよびgetDateのデータを最後に出力するDataFrameを作成して出力する.

検査結果

既存のコードの結果

コード変更結果

京畿道大邱(キョンギド·テグ)だけでなく、済州島(チェジュド)まで加えれば適用されることが分かる.

足りないところ

該当する경기 대구 제주等のボタンをクリックする場合は、削除可能なハンドルを実施する必要があります.(選択肢を多様化させるため)