JSFiddle - React, Tailwind, and code Playground

by zoldello

CSS

.node {
    fill: #ccc;
    stroke: #fff;
    stroke-width: 2px;
}
.link {
    stroke: #777;
    stroke-width: 2px;
}

JavaScript

var width = 640,
    height = 480,
    constant = 100;

var nodes = [
    {label: 'A', x: constant, y: 215 , width:70,height:50 },
    {label: 'B', x: constant + 45, y: 375 ,width:70,height:50 },
    {label: 'C', x: 2.5*constant, y: 255 ,width:70,height:50 },
    {label: 'D', x: 4*constant, y: 215 ,width:70,height:50 }
    {label: 'E', x: 6*constant, y: 215 ,width:70,height:50 }
];

var links = [
    { source: 0, target: 1 },
    { source: 0, target: 2},
    { source: 1, target: 2},
    { source: 2, target: 3}
];

var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);
var force = d3.layout.force()
    .size([width, height])
    .nodes(nodes)
    .links(links);
force.linkDistance(width/4);

var link = svg.selectAll('.link')
    .data(links)
    .enter().append('line')
    .attr('class', 'link')
    .style("stroke-width", "5px")
    .style("opacity", "0.7");

var node = svg.selectAll('.node')
    .data(nodes)
    .enter().append('g')
    .attr('class', 'node')
.attr("transform", function(d){
    return "translate("+d.x+","+d.y+")";
});

node.append("rect").attr("class", "nodeRect")
        .attr("rx", 6)
        .attr("ry", 6)
        .attr('width', function(d) { return d.width; })
        .attr('height', function(d) { return d.height; })
        .style("fill", "#2376B2");

node.append("text").style("text-anchor", "middle")
        .style("pointer-events", "none")
        .style("font-weight", 900)
        .attr("fill", "white")
        .style("stroke-width", "0.3px")
        .style("font-size", "16px")
        .attr("y", function (d){return d.height/2+6;})
        .attr("x", function (d){return d.width/2;})
        .text(function (d) {return d.label;});


force.start();

link.attr('x1', function(d) { return d.source.x + d.source.width/2; })
    .attr('y1', function(d) { return d.source.y + d.source.height/2; })
    .attr('x2', function(d) { return d.target.x + d.target.width/2; })
    .attr('y2', function(d) { return...