【Python】グラフを表示しつつ、その変化の様子を表示できない

###実現したいこと
バブルソートのコードを実行し、それを基に作られるグラフが変化する様子を見たいです。
質問になれていないため至らない点もあるかと存じますが、解決法をご教示頂ければ幸いです。
Markdownに画像がどうしても挿入できず、イメージ図をお見せすることができません。。。

###前提条件
ソースコードファイル名：chap5-3.py

###該当のソースコード

import tkinter
from PIL import Image, ImageTk
from time import sleep

def draw_graph(roop_count):
    x=start_x
    y=start_y
    root.update
    sleep(0.5)
    canvas.delete("graph")
    for i in range(len(list)):
        if i==roop_count or i == roop_count+1:
            color="red"
        else:
            color="blue"
        canvas.create_rectangle(x,y,x+list[i]*width_px,y+height_px,fill=color, outline=color, tag="graph")
        y=y+height_px+distance_px
      
root=tkinter.Tk()
root.title("棒グラフをソート")

canvas=tkinter.Canvas(root, width=640,height=480)
canvas.create_rectangle(40,40,600,440,fill="gray78")
canvas.pack()

start_x=60
start_y=60
width_px=5
height_px=32
distance_px=4
list=[70,12,32,100,2,34,90,33,3,23]

for k in range (len(list)-1,0,-1):
    print(str(10-k)+"度目")
    for j in range(0,k):
        if list[j] > list[j+1]:
            temp = list[j]
            list[j] = list[j+1]
            list[j+1]=temp
        draw_graph(j)
       
root.mainloop()

###イメージ図

バブルソートする際に比較する値を赤色にしています。
比較する値が変化するたびに色が移り変わりグラフも移っていってほしいのですが、、、
説明がわかりにくく恐れ入りますが、助けて頂ければうれしいです。

###補足情報(言語/FW/ツール等のバージョンなど)
エディタ：Visual Studio Code
OS：macOS Sierra
python version：3.6.2

###参考テキスト
12歳からはじめる0からのPython

行動規範の内容に同意します

回答1件

ベストアンサー

ご質問の内容は、ソート途中が表示されず、ソート後しか見ることができないという点かと思います。
描画周りのコードを修正してみたコードを下記に記載します。

途中経過が表示されないのは、root.mainloop()で画面表示が始まる前に処理がすべて終わってしまっているからです。
また、グラフの描画ごとにcanvas.update()の実行も必要です。

そのため、下記コードではNextボタンを配置して、描画後にソート処理が始まるようにしています。
ボタンクリック時の操作制御は考慮していませんので、連続クリックされるとソート結果がおかしくなったり、1回ごとの処理がいつ終わったかがわからなかったりしますが、そのあたりは手抜きしています。
また、描画ごとのloop_countを保持するために、DispSortクラスを新規に定義して使用しています。

最初から最後まで自動で、ということであれば、動作のきっかけとしてボタンを使って、あとはご質問記載のコードのようにloop_count分の実行をまとめて行われるとよいかと思います。

python
1import tkinter
2from PIL import Image, ImageTk
3from time import sleep
4
5class DispSort:
6    loop_count = 0
7
8    def next(self, event):
9        self.loop_count += 1
10
11        print(str(self.loop_count)+"度目")
12
13        for j in range(0,len(list)-self.loop_count):
14            if list[j] > list[j+1]:
15                temp = list[j]
16                list[j] = list[j+1]
17                list[j+1]=temp
18            self.draw_graph(j)
19
20    def draw_graph(self, loop_count):
21        x = start_x
22        y = start_y
23        root.update
24        sleep(0.5)
25        canvas.delete("graph")
26        for i in range(len(list)):
27            if i == loop_count or i == loop_count + 1:
28                color="red"
29            else:
30                color="blue"
31            canvas.create_rectangle(x, y, x + list[i] * width_px,
32                y + height_px, fill = color, outline = color, tag = "graph")
33            y = y + height_px + distance_px
34        canvas.update()
35
36dispSort = DispSort()
37
38root=tkinter.Tk()
39root.title("棒グラフをソート")
40
41canvas=tkinter.Canvas(root, width=640,height=480)
42canvas.create_rectangle(40,40,600,440,fill="gray78")
43canvas.pack()
44
45btn = tkinter.Button(root, text="Next")
46btn.bind("<Button-1>", dispSort.next)
47btn.pack()
48
49start_x=60
50start_y=60
51width_px=5
52height_px=32
53distance_px=4
54list = [70,12,32,100,2,34,90,33,3,23]
55
56dispSort.draw_graph(0)
57
58root.mainloop()