如何从 mysql 数据库中提取数据并使用 D3.JS 进行可视化？答案

【问题标题】：How to pull data from mysql database and visualize with D3.JS?如何从 mysql 数据库中提取数据并使用 D3.JS 进行可视化？
【发布时间】：2013-03-13 12:02:05
【问题描述】：

我在MySQL 中有一个数据库，我想在D3.JS 中对其进行可视化。为了做到这一点，首先我想parseJSON 格式的数据，然后编写一个从数据库中提取数据并使用D3.JS 可视化的基本代码。我环顾四周，但找不到我想要的东西，因为我是 D3.JS 的新手。

我怎样才能做到这一点？任何帮助或线索表示赞赏。

【问题讨论】：

标签： mysql json d3.js visualization

【解决方案1】：

以下是一个 php 脚本，您应该可以将其保存为文件（假设您将其称为“getdata.php”），该文件可从您的 HTML 文件中访问，其中包含您的 D3 代码。调用时，它将以 json 格式从您的 MySQL 数据库返回数据（只要数据库服务器不在您的域之外）；

<?php
    $username = "******"; 
    $password = "******";   
    $host = "******";
    $database="***dbase_name***";

    $server = mysql_connect($host, $user, $password);
    $connection = mysql_select_db($database, $server);

    $myquery = "
    query here
    ";

    $query = mysql_query($myquery);

    if ( ! $query ) {
        echo mysql_error();
        die;
    }

    $data = array();

    for ($x = 0; $x < mysql_num_rows($query); $x++) {
        $data[] = mysql_fetch_assoc($query);
    }

    echo json_encode($data);     

    mysql_close($server);
?>

显然，您需要为用户名、密码、主机和数据库输入适当的详细信息。您还需要为您的数据包含一个适当的查询，以便它返回您正在寻找的内容。类似的东西（这只是一个猜测）；

SELECT `dateTimeTaken`, `reading` FROM `tablename`

这将从名为tablename 的表中返回时间戳和值的列表，其中列名为dateTimeTaken 和reading。然后，当您读取您的 json 文件时，您将对您将在 json 中读取的代码使用以下语法；

d3.json("getdata.php", function(error, data) {

希望这与您正在寻找的内容相近。我已经在本地对其进行了测试，似乎一切正常..

我已经整理了一篇文章来介绍简单 WAMP 服务器的本地安装，并在此处从 d3.js http://www.d3noob.org/2013/02/using-mysql-database-as-source-of-data.html 对 MySQL 数据库设置查询

这和Accessing MySQL database in d3 visualization的情况差不多

【讨论】：

【解决方案2】：

简答：网络服务。

基本上，您会想要创建一个 Web 服务，该服务将返回 json 数据（例如）以连接到 d3.json() 调用。

我建议你使用 Python 快速做一些扩展 SimpleHTTPServer 的事情，或者使用 Web 服务框架，例如 web2py。

【讨论】：

【解决方案3】：

AFAIK 没有任何库允许 javascript 直接连接到 MySQL 数据库。而是考虑通过 Web 服务公开您的数据（使用任意数量的服务器端技术：ASP.Net、PHP、Ruby on Rails 等）并在响应中将您的数据序列化为 JSON

【讨论】：

你建议我从什么开始？
如果这些都没有意义，您可能希望将数据从 MySQL 手动导出为 .csv（类似 phpmysqladmin 有此选项，或者您可以在命令行上执行），然后直接加载该 .csv 文件。 csv 到 D3，它有一个 csv 加载工具。（或者，如果您使用制表符作为分隔符进行导出，请使用 D3“tsv”导入。）它不是动态的，但您会比退后一步学习一个全新的框架更快地启动和运行。
@ChrisWilson 我没有直接访问数据库的权限，我将在实时可视化中使用它。

【解决方案4】：

我自己在使用 json_encode 时遇到了问题，最后我编写了自己的代码而不是 json_encode。只需要设置 sql 和 yoru 连接信息。希望对您有用。

$conn = new mysqli(DB_Host, DB_User, DB_Password, DB_Name) or die("Connection failed: " . $conn->connect_error);
$sql = "select  AID as id, deDate_Value as date, nterTime AS counter 
        from xxxx";

//Get the Date and store it in array
$records = array();
if ( $result=mysqli_query($conn,$sql) )
    while ( $obj=mysqli_fetch_object($result) )
        $records[] = $obj;

//echo in json format on screen       
echo "[";
$comma_1 = "";
foreach($records as $obj)
{
    echo $comma_1."{";
    $comma_2 = "";
    foreach($obj as $key => $value)
    {
        echo $comma_2.'"'.$key."\": \"". $value . "\"";
        $comma_2 = ", ";
    }
    echo "}";
    $comma_1 = ", \n";
}

【讨论】：

【解决方案5】：

为了让 d3.json 工作，我必须用以下方式调用它（我的 PHP 文件生成 JSON 数据）：

d3.json("InventoryData.php").then(function(data){
  console.log(data);
});

【讨论】：

【解决方案6】：

您可以使用以下比较流行的jQuery：

$.getJSON( "ajax/test.json", function( data ) {
console.log(data);
}

【讨论】：