простой график связей d3.js из таблицы mysql

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, который подключается к ObjectB ID1 101
ObjectB имеет ID1 с 102, который соединяется с ObjectC ID1 102
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, как я m используется для кодирования php и python. я действительно действительно надеялся, что кто-то пожалеет меня и поднимет маленький пример, который я могу начать взламывать.

так что любые идеи и примеры того, как действовать, будут очень оценены.

Answer 1

Я использовал данные, которые у вас есть, чтобы создать визуализацию, которая кажется в соответствии с вашим описанием. Вы можете найти его here. Это немного скучно, но я уверен, что больше данных сделает его более интересным. Обратите внимание: мне пришлось немного поработать с вашими данными, чтобы получить формат, который будет работать с этим примером, но питоны - довольно хороший инструмент для такого рода вещей, поэтому у вас должна быть проблема.

Другая вещь, о которой я думал, когда я читал, - это описание Parallel Sets, и Кай Чанг создал плагин для того, что можно найти here.

Если вы еще этого не сделали, я бы рекомендовал посмотреть на d3 examples page, чтобы узнать больше о том, какая визуализация будет соответствовать вашим наборам данных и желаемым результатам. И, кроме того, там действительно классные вещи.