d3.js检索mysql数据

最新推荐文章于 2023-07-16 22:23:22 发布

原创最新推荐文章于 2023-07-16 22:23:22 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

php 同时被 2 个专栏收录

21 篇文章

订阅专栏

4 篇文章

订阅专栏

本文介绍了如何利用d3.js从mysql数据库检索数据，并将结果显示为html中的树形结构。主要步骤包括：1. index.html中通过检索文本框输入内容，2. PHP读取mysql并返回子孙节点的JSON数据，3. 使用CSS调整d3.js绘制的树形结构样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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