搞了几天终于实现了使用 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. 结果展示:
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: