时间戳

首页 > 解决方案 > 使用 php 从 mysql 获取 d3.js 的数据

php - 使用 php 从 mysql 获取 d3.js 的数据

问题描述

我真的是 d3.js 的新手，而不是 javascript 方面的专家。但是对于我的学士论文，我需要从 mysql 数据库中获取一些数据并将结果转换为 json。现在我正处于我卡住的地步。我尝试使用本教程，它的工作原理有点……但是当我尝试将它连接到 d3 时，我遇到了数据问题。

我的 php 文件看起来像

<?php 
    define("IN_MYBB", 1);
    require("global.php");
    $get_relation = $db->query("SELECT r_id,r_from,r_to,r_kategorie as kom FROM " . TABLE_PREFIX . "relas WHERE r_npc = 0 LIMIT 10");
    $relas= array();
    while ($row = mysqli_fetch_assoc($get_relation))
        {
            $relas[] = $row;
        } 
        header('Content-type:application/json;charset=utf-8'); 
        echo json_encode($relas);
?>

（我使用来自 mybb.com 的一些函数来获取数据，因为我使用来自论坛的数据）我从那个 php 的输出看起来很不错。（我想）

[{"r_id":"7","r_from":"17","r_to":"1","kom":"Bekannte"},{"r_id":"8","r_from":"1","r_to":"17","kom":"Bekannte"},{"r_id":"9","r_from":"422","r_to":"448","kom":"Familie"},{"r_id":"10","r_from":"422","r_to":"382","kom":"Freunde"},{"r_id":"960","r_from":"654","r_to":"581","kom":"Freunde"},{"r_id":"15","r_from":"503","r_to":"504","kom":"Liebe"},{"r_id":"16","r_from":"503","r_to":"511","kom":"Freunde"},{"r_id":"21","r_from":"382","r_to":"422","kom":"Freunde"},{"r_id":"23","r_from":"511","r_to":"503","kom":"Freunde"},{"r_id":"26","r_from":"448","r_to":"422","kom":"Familie"}]

现在我尝试将 php 文件连接到我的 d3.js


d3.csv("http://localhost:8888/mai20/visual.php").then(function(data){
    console.log(data);
    data.forEach(function(d){
        console.log(d)
    });
});

我的输出看起来真的很难看，我很确定有些东西不起作用。我什至无法进入 for each 循环......

[columns: Array(80)]
columns: Array(80)
0: "[{"r_id":"7""
1: "r_from"
2: "17"
3: "r_to"
4: "1"
5: "kom"
6: "Bekannte"
7: ""
8: "{"r_id":"8""
9: "r_from"
10: "1"
11: "r_to"
12: "17"
13: "kom"
14: "Bekannte"
15: ""
16: "{"r_id":"9""
17: "r_from"
18: "422"
19: "r_to"
20: "448"
21: "kom"
22: "Familie"
23: ""
24: "{"r_id":"10""
25: "r_from"
26: "422"
27: "r_to"
28: "382"
29: "kom"
30: "Freunde"
31: ""
32: "{"r_id":"960""
33: "r_from"
34: "654"
35: "r_to"
36: "581"
37: "kom"
38: "Freunde"
39: ""
40: "{"r_id":"15""
41: "r_from"
42: "503"
43: "r_to"
44: "504"
45: "kom"
46: "Liebe"
47: ""
48: "{"r_id":"16""
49: "r_from"
50: "503"
51: "r_to"
52: "511"
53: "kom"
54: "Freunde"
55: ""
56: "{"r_id":"21""
57: "r_from"
58: "382"
59: "r_to"
60: "422"
61: "kom"
62: "Freunde"
63: ""
64: "{"r_id":"23""
65: "r_from"
66: "511"
67: "r_to"
68: "503"
69: "kom"
70: "Freunde"
71: ""
72: "{"r_id":"26""
73: "r_from"
74: "448"
75: "r_to"
76: "422"
77: "kom"
78: "Familie"
79: "]"
length: 80
__proto__: Array(0)
length: 0
__proto__: Array(0)

似乎它弄乱了键和值......我不知道我错在哪里。所以也许有人可以帮助我，我会非常感激。

标签： phpmysqljsond3.js

解决方案

由于您从脚本中以 JSON 格式返回数据，因此在使用 D3 加载数据时，您需要使用d3.json：

d3.json("http://localhost:8888/mai20/visual.php").then(data => {
    console.log(data);
    data.map(d => console.log(d));
});

推荐阅读