JSFiddle - React, Tailwind, and code Playground

by herbstmb

HTML

<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>

CSS

line.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

circle {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1.5px;
}

JavaScript

var nodes = [
    {id: 1, size: 2},
    {id: 2, size: 10},
    {id: 3, size: 5},
    {id: 4, size: 4},
    {id: 5, size: 7}
];

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

var w = 960,
    h = 500;

var force = d3.layout.force()
    .nodes(nodes)
    .links(edges)
    .size([w, h])
    .linkDistance(60)
    .charge(-300)
    .on('tick', tick);

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

var link;
var node;

update();
function update() {   
    //Restart the layout
    force
        .nodes(nodes)
        .links(edges)
        .start();
    
    //Update the links
    link = svg.selectAll('line.link')
        .data(edges, function(d) { return d.target.id; });
                         
    // Enter any new links.
    link.enter().insert('svg:line', '.node')
        .attr('class', 'link')
        .attr('x1', function(d) { return d.source.x; })
        .attr('y1', function(d) { return d.source.y; })
        .attr('x2', function(d) { return d.target.x; })
        .attr('y2', function(d) { return d.target.y; });
    
    // Exit any old links.
    link.exit().remove();
    
    // Update the nodes…
    node = svg.selectAll('circle.node')
        .data(nodes, function(d) { return d.id; });
    
    // Enter any new nodes.
    node.enter().append('svg:circle')
        .attr('class', 'node')
        .attr('cx', function(d) { return d.x; })
        .attr('cy', function(d) { return d.y; })
        .attr('r', function(d) { return d.size; })
        .call(force.drag);

    // Exit any old nodes.
    node.exit().remove();
    
    // Per-node markers
    svg.append('svg:defs').selectAll('marker')
        .data(node, function(d) { return d.id; })
    .enter().append('svg:marker')
        .attr('id', function(d) { return d.id; })
        .attr('viewBox', '0 -5 10 10')
        .attr("refX",...