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

Question

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

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

Answer 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上设置MySQL数据库的查询http://www.d3noob.org/2013/02/using-mysql-database-as-source-of-data.html

这与Accessing MySQL database in d3 visualization几乎相同

Answer 2

简答：Web服务。

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

我建议你使用Python快速做一些扩展SimpleHTTPServer的事情，或者使用像web2py这样的web服务框架。

Answer 3

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

Answer 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";
}

Answer 5

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

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

Answer 6

您可以使用更流行的jQuery，如下所示：

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