d3.js檢索mysql資料
阿新 • • 發佈:2018-12-30
搞了幾天終於實現了使用d3.js讀取mysql資料庫,並將結果以樹形結構顯示在html中。大概說下思路:
1.網站入口index.html,通過檢索文字框搜尋某內容,html內容如下:
<form action="check.php" method="post">
<input type="text" name="input"/>
<br/>
<input type="Submit" name="Submit" value="查詢"/>
</form>
2.從1看到網頁跳轉到check.php頁面。該php頁面包括四部分:
第一部分是php讀取mysql資料庫的邏輯部分,並將1中檢索內容的子孫節點以JSON形式返回。
第二部分為css實現,規範d3.js顯示的樹形結構。
<style>
.node circle {
cursor: pointer;
fill: #fff;
stroke: steelblue;
stroke-width: 2px;
}
.node text {
font-size: 12px;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
</style>
第三部分為html內容,作用是將php中的變數傳值至js程式碼快中,實現方式為:
第部分為d3實現將json資料轉化為視覺化資料。該部分原始碼為d3.js從本地json檔案讀取,現在將之前php處理得到的json直接傳遞至js中用來進行視覺化。<input type="text" name="userId" id="userId" value='<?php echo $phparraybianliang; ?>' style="display:none;">
3.結果展示: