Question

我正在尝试使用d3.js来绘制mysql表中的关系。这是一个示例表来解释我想要实现的目标。

+----+---------+-------+------+
| id | name    | entry | type |
+----+---------+-------+------+
|  1 | ObjectA | 100   | ID1  |
|  2 | ObjectA | 101   | ID1  |
|  3 | ObjectB | 101   | ID1  |
|  4 | ObjectB | 102   | ID1  |
|  5 | ObjectC | 102   | ID1  |
|  6 | ObjectC | 100   | ID1  |
|  7 | ObjectA | 200   | ID2  |
|  8 | ObjectA | 201   | ID2  |
|  9 | ObjectB | 201   | ID2  |
| 10 | ObjectB | 202   | ID2  |
| 11 | ObjectC | 202   | ID2  |
| 12 | ObjectC | 200   | ID2  |
+----+---------+-------+------+

ObjectA的ID1为101，连接到101的ObjectB ID1 ObjectB具有ID1，其102连接到102的ObjectC ID1 ObjectC的ID1为100，连接到ObjectA ID1为100

我的最终目标是将ObjectA，ObjectB，ObjectC显示为三个相互连接的圆圈，蓝色和红色线代表ID1和ID2关系。

到目前为止，我正在按照视频和我读过的内容广泛推荐将表输出到json。我正在使用php。

[
{
    "id": "1",
    "name": "ObjectA",
    "entry": "100",
    "type": "ID1",
},
etc..

然后从html文件中读取

d3.json(
  "mysql_table_to_json.php?table=objects",
       function (error, json) {
then something..
})

我尚未想到的一些部分..而且我发现我很难用javascript来解决这个问题，因为我已经习惯了php和python编码。我真的非常希望somone会怜悯我并掀起一个小例子我可以开始乱砍。

因此，非常感谢任何有关如何进行的想法和示例。

Answer 1

我已经使用您上面的数据来创建似乎的图表以适合您的描述。你可以找到它here。这一刻很无聊，但我相信更多的数据会让它变得更有趣。请注意，我必须稍微处理一下你的数据才能进入一个可以使用这个例子的格式，但pythons是一个非常好的工具，所以你应该有一个问题。

当我读到你的描述时，我想到的另一件事是Parallel Sets，而Kai Chang已经创建了一个插件，可以找到here。

如果您还没有我建议查看d3 examples page以获得更多有关可视化适合您的数据集和所需结果的想法。除此之外还有一些很酷的东西。

来自mysql表的简单d3.js关系图

1 个答案: