1. 程式人生 > >d3.js檢索mysql資料

d3.js檢索mysql資料

搞了幾天終於實現了使用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程式碼快中,實現方式為:
<input type="text" name="userId" id="userId" value='<?php echo $phparraybianliang; ?>' style="display:none;">
第部分為d3實現將json資料轉化為視覺化資料。該部分原始碼為d3.js從本地json檔案讀取,現在將之前php處理得到的json直接傳遞至js中用來進行視覺化。
3.結果展示: