[D3.js] 로또 출현 번호 추적-2

codingman (64)in #kr-dev • 7 years ago (edited)

[D3.js] 로또 출현 번호 추적-2

사전학습 : [D3.js] 로또 출현 번호 추적-1

지난 시간에 로또 번호 데이터를 만들고 나서 데이터를 읽는 것까지 실험 했습니다. 오늘은 이 데이터를 가지고 로또 출현 번호를 추적해 보는 시간으로 간단히 코딩해보도록 하겠습니다. 초기 실험 형태로 막코딩한 거라 약간은 정리가 안되어 있는데 감안해서 보시기 바랍니다.

1. HTML 데이터 입/출력 위치

<body>
  <input type="text" oninput="aaa(this.value)"  maxlength="3" size="3"/>회
  <input type="text" oninput="bbb(this.value)"  maxlength="1" size="1"/>이상 출현
  <div id="demo1" style="background-color:yellow">  </div>
</body>

[결과]

위와 같은 형태로 출력이 되도록 기본 폼을 세팅하겠습니다. 위 결과 모습에서 다음 라인에는 842회차 3회이상 일치한 회차들을 전부 추적하도록 결과를 만들어 낼 예정입니다. 아무튼 대충 이런 느낌으로 세팅을 해놓습니다.

2. 데이터 조회 후 결과 출력

로또 데이터를 각 회차 단위로 읽어와서 각 숫자들과 조회 할 회차의 숫자와 비교해서 일치한 숫자가 있을 때 카운트(cnt)세기를 통해 일치 개수를 파악할 수 있습니다. 그리고 카운트(cnt)한 숫자와 조회 할 숫자를 비교해서 해당되는 회차의 로또 데이터를 출력을 시키도록 코딩을 하겠습니다.

   data.forEach(function(d){
        var cnt=0;

        for(var i=1;i<7;i++){
          var ch1="n"+i;
          for(var j=1;j<7;j++){
            var ch2="n"+j;
            if(data[ch_number][ch1]===d[ch2]){ //일치한 데이터 개수(cnt) 세기 <= 데이터 조회
              cnt++;
            }
          }
        }
        if(cnt>=chk){ //일치한 개수가 출현 횟수보다 크거나 같다 <= 결과 출력
          console.log(d.th+"회 : "+d.n1+","+d.n2+","+d.n3+","+d.n4+","+d.n5+","+d.n6+" 출현 : "+cnt);
          var string = d.th+"회 : "+d.n1+","+d.n2+","+d.n3+","+d.n4+","+d.n5+","+d.n6+" 출현 : "+cnt;
          p.append("p")
           .attr("fill","blue")
           .text(string);

        }

      });

[결과]

3. 코딩

[소스]

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
  <input type="text" oninput="aaa(this.value)"  maxlength="3" size="3"/>회
  <input type="text" oninput="bbb(this.value)"  maxlength="1" size="1"/>이상 출현
  <div id="demo1" style="background-color:yellow">  </div>

  <script>
    var ch_number  = 0;
    var chk=1;
    var fulldata;

    function aaa(data) {
        ch_number=data-1;

        StrNumber =fulldata[ch_number].th+"회 : "+fulldata[ch_number].n1+","+fulldata[ch_number].n2+","+fulldata[ch_number].n3+","+fulldata[ch_number].n4+","+fulldata[ch_number].n5+","+fulldata[ch_number].n6;
        document.getElementById("demo1").innerHTML=StrNumber;
        var p = d3.select("body").selectAll("p").remove();
        render(fulldata);

    }
    function bbb(data) {
        chk=data;
        var p = d3.select("body").selectAll("p").remove();
        render(fulldata);
    }

    function render(data){
      //var ch_number = 710-1;
      var p = d3.select("body");
      
      data.forEach(function(d){
        var cnt=0;

        for(var i=1;i<7;i++){
          var ch1="n"+i;
          for(var j=1;j<7;j++){
            var ch2="n"+j;
            if(data[ch_number][ch1]===d[ch2]){
              cnt++;
            }
          }
        }
        if(cnt>=chk){
          console.log(d.th+"회 : "+d.n1+","+d.n2+","+d.n3+","+d.n4+","+d.n5+","+d.n6+" 출현 : "+cnt);
          var string = d.th+"회 : "+d.n1+","+d.n2+","+d.n3+","+d.n4+","+d.n5+","+d.n6+" 출현 : "+cnt;
          p.append("p")
           .attr("fill","blue")
           .text(string);

        }

      });
    }

   d3.csv("number.csv",type, function(error,dataset){
      if (error) throw error;
      fulldata=dataset;
      render(dataset);
  });

  function type(d){
    d.n1=+d.n1;
    d.n2=+d.n2;
    d.n3=+d.n3;
    d.n4=+d.n4;
    d.n5=+d.n5;
    d.n6=+d.n6;
    return d;
  }

  </script>
</body>
</html>

[결과]

마무리

이게 처음 구상한 한 부분의 상상 테스트 코딩이네요. 뭔가 HTML로 멋지게 배치하고 결과를 확인 시키면 그럴싸하게 만들어지겠지만 디자인 코딩을 해서 멋지게 보이는 것이 목적이 아니라 하고싶은 내용의 결과를 얻기 위해서 기본 코딩만을 통해서 결과를 얻는데까지 코딩만 담겨져 있습니다. 재미 삼아서 몇가지 표현 중 한가지 표현이라서 볼 것은 없지만 과거 자료들을 찾다가 발견한 거라서 재미로 소개 합니다.

그 당시 지난 회차 로또 번호들과 랜덤으로 만들어 낸 로또 번호와의 비교 측정용 코딩을 만들기 위한 목적의 코딩부분이네요. 자신이 만든 로또 번호가 지난 회차 로또 번호들와 어느정도 일치하는지를 통해서 랜덤 번호를 생성하도록 하면 좀 더 괜찮은 랜덤 로또 번호를 만들어 낼 수 있겠죠. 과거 버전 V4로 d3.js를 잠깐 몇일 공부했을 때 공부용으로 제작한 거라 재미로 공개를 해봅니다.