d3.js检索mysql数据

来源:互联网 发布:jsp端口更改 编辑:程序博客网 时间:2024/04/30 09:07

搞了几天终于实现了使用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.结果展示:


0 0
原创粉丝点击