I’m really new to d3.js and not an expert in javascript. But for my bachelor thesis I need to fetch some data from a mysql database and convert the result to json. Now i’m at a point where i stuck. I try to use this Tutorial and it works kind of… but i’ve got trouble with the data when i try to connect it to d3.

my php file looks like

<?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); ?> 

(I’m using some functions from mybb.com to get the data, because i use data from a forum) My Output from that php looks pretty fine. (i think)

[{"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"}] 

now i tried to connect the php file to my d3.js

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

and my output looks really ugly, and i’m pretty sure something is not working. I’m even not able to get in the for each loop…

[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) 

it seems like it messed up the key and values… and i have no idea, where i am wrong. So perhaps someone her can help me please I would be very thankful.