JSFiddle - React, Tailwind, and code Playground

by Brett

JavaScript

function parent(n){
    var o;
    srcData.forEach(function(d){
        if(d.id == n)
            o = d;
    });
    return o;
}

var srcData = 
    [{"id":1, "name":"first", "parentid":0, "value":100, "color":"red", "posx":100, "posy":100},
    {"id":2, "name":"second", "parentid":1, "value":80, "color":"red", "posx":100, "posy":200},
    {"id":3, "name":"third", "parentid":2, "value":120, "color":"red", "posx":150, "posy":300},
    {"id":4, "name":"fourth", "parentid":2, "value":100, "color":"red", "posx":50, "posy":300},
    {"id":5, "name":"fifth", "parentid":3, "value":200, "color":"red", "posx":250, "posy":400},
     {"id":6, "name":"fifth", "parentid":5, "value":200, "color":"red", "posx":150, "posy":500},
     {"id":7, "name":"fifth", "parentid":5, "value":200, "color":"red", "posx":250, "posy":500},
     {"id":8, "name":"fifth", "parentid":5, "value":200, "color":"red", "posx":350, "posy":500}
    ];

var svg = d3.select("body").append("svg").attr("height",800).attr("width",1000);

var items = svg.selectAll("g").data(srcData).enter().append("g");
    items.each(function(d, i){
        d3.select(this).attr("transform","translate("+d.posx+","+d.posy+")");
        
        if(d.parentid > 0)
            d3.select(this).append("line")
                .attr("x",0)
                .attr("y",0)
                .attr("x1",function(d){ return -1*(d.posx - parent(d.parentid).posx); })
                .attr("y1",function(d){ return -1*(d.posy - parent(d.parentid).posy); })
                .style("stroke",d.color)
                .style("stroke-width",2);
        
        d3.select(this).append("circle")
            .attr("r",1)
            .style("fill",d.color);
    });