python向js傳參
摘要：
標題說的可能不是很清楚。事情是這樣的，最近在用python做一個數據的處理及視覺化的專案，但是資料比較複雜，用python包繪圖無法滿足我們的全部功能，於是想要用D3.js來進行視覺化及互動。而為了其他人使用方便，我打算 執行完python程式就可以在本地生成一個html檔案並自動開啟 。當...
標題說的可能不是很清楚。事情是這樣的，最近在用python做一個數據的處理及視覺化的專案，但是資料比較複雜，用python包繪圖無法滿足我們的全部功能，於是想要用D3.js來進行視覺化及互動。而為了其他人使用方便，我打算 執行完python程式就可以在本地生成一個html檔案並自動開啟 。當然，要是想這個功能可以用python搭一個服務端。但在我這個功能下是完全沒有必要的。
話不多說，由於專案的資料不可能拿來分享，我這裡用的是d3官網上的一個數據。這裡做了一個demo，供大家參考。結構如下：
demo/ demo.py plot.js demo.css demo.json
然後只要執行一下 demo.py 就會開啟一個html頁面。具體程式碼看這裡。 https://github.com/peakhell/demo
其實關鍵的地方只有一個
def plot_net(graph, filename):
with open("plot.js", "r") as f:
data_func = f.read()
with open(filename, "w") as f:
f.write(''.join([
'<html>',
'<head><meta charset="utf-8" /></head>',
"<script src='https://d3js.org/d3.v4.min.js'></script>",
"<link href='demo.css' rel='stylesheet' type='text/css'/>",
'<body>',
"<div id='draw'>",
"<svg></svg>",
"</div>"
"<script>",
data_func,
"read_data({});".format(graph),
"</script>"
]))
webbrowser.open_new_tab(filename)
注意看上面的函式， graph是資料，在我這個demo中是通過python讀取的json檔案。filename就是你要儲存的檔名。
向js傳遞引數很簡單。只用在js檔案中定義一個接受資料的函式。然後用python的字串拼接將傳輸傳進去就可以了。看這個地方。
data_func,
"read_data({});".format(graph),
注意read_data同時也是plot.js中的一個函式。通過這一個就可以將資料傳進js中了。
demo的執行效果如下：
力導向圖demo
demo是一個力導向圖。值得注意的是，demo.css中有一句很重要
* {
margin: 0;
padding: 0;
}
如果不加這一句的話，出來的html頁面將會變寬和變高，導致出現滾輪。這是由於body元素自帶的margin導致的。因此一定要新增。
我這個專案接下來的工作是給這個頁面新增互動功能。如一鍵儲存成圖片，放大縮小，雙擊還原等等。有空了會把這些方法寫到這些demo中，到時候再更新github， 如果有人看的話，我也會更新這篇文章，記錄一下關鍵技術。