JSFiddle - React, Tailwind, and code Playground

by fekkyDev s

CSS

/* CSS Document */
 .link2 {
    stroke: #000;
    stroke-width: 2px;
    stroke-dasharray:3, 3;
}
.link1 {
    stroke: #000;
    stroke-width: 2px;
}
.link4 {
    stroke: #000;
    stroke-width: 2px;
}
.nodetext {
    pointer-events: none;
}
.node.type4 {
    fill: #800000;
}
.node.type1 {
    fill: #BF00426;
}
.node.type3 {
    fill: #0000A0;
    size: 20px;
}
.node.type2 {
    fill: #008000;
    size: 40px;
}
.node.type4 {
    fill: #65000b;
    size: 40px;
}
image.circle {
    cursor: pointer;
}
.fadein {
    display: none;
    font-size: 20px;
}
.rectD {
    background-color: #000000;
    width: 70px;
    height: 30px
}
.rectL {
    background-color: #000000;
    width: 90px;
    height: 30px
}

JavaScript

var data = {
    "nodes": [{
        "name": "9748108991",
            "type": 1,
            "slug": "",
            "entity": "company"
    }, {
        "name": "offnet",
            "type": 1,
            "slug": "",
            "entity": "employee"
    }, {
        "name": "onnet",
            "type": 1,
            "slug": "",
            "entity": "employee"
    }, {
        "name": "8749258125",
            "type": 4,
            "slug": "",
            "entity": "description"
    }, {
        "name": "9748697490",
            "type": 4,
            "slug": "",
            "entity": "description"
    }],
        "links": [{
        "source": 0,
            "target": 1,
            "value": 1,
            "distance": 5
    }, {
        "source": 0,
            "target": 2,
            "value": 1,
            "distance": 5
    }, {
        "source": 1,
            "target": 3,
            "value": 4,
            "distance": 5
    }, {
        "source": 1,
            "target": 4,
            "value": 4,
            "distance": 5
    }]
}



var w = 500,
    h = 500,
    radius = d3.scale.log().domain([0, 312000])
        .range(["10", "50"]);

var vis = d3.select("body").append("svg:svg").attr("width", w).attr(
    "height", h);

vis.append("marker")
    .attr("id", "arrowhead")
    .attr("refX", 6 + 6) /*must be smarter way to calculate shift*/
.attr("refY", 2)
    .attr("markerWidth", 6)
    .attr("markerHeight", 4)
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead


//d3.json("myjson.json", function(data,error) {
var force = self.force = d3.layout.force().nodes(data.nodes).links(
data.links).linkDistance(function (d) {
    return (d.distance * 10);
})
//.friction(0.5)
.charge(-250).size([w, h]).start();

var link = vis.selectAll("line.link").data(data.links).enter().append(
    "svg:line").attr("class", function (d) {
    return "link" + d.value + "";
}).attr("x1", function (d) {
   ...