JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<div id="svg-holder"></div>
CSS
.link {
stroke: #000;
stroke-width: 2px;
}
.node {
fill: #f00;
}
.nodename {
fill: #000;
}
JavaScript
var nodes = [
{name:'00:00:00:00:00:01'},
{name:'00:00:00:00:00:02'},
{name:'00:00:00:00:00:03'},
{name:'00:00:00:00:00:04'},
{name:'00:00:00:00:00:05'}
];
var links = [
{source:0,target:1},
{source:1,target:2},
{source:1,target:3},
{source:3,target:4}
];
var width = 700;
var height = 700;
var svg = d3.select('#svg-holder').append('svg')
.attr('width', width)
.attr('height', height);
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(150)
.charge(-800)
.on('tick', tick)
.start();
var link = svg.selectAll('.link')
.data(force.links())
.enter().append('line')
.attr('class', 'link');
var node = svg.selectAll('.node')
.data(force.nodes())
.enter().append('circle')
.attr('class', 'node')
.attr('r', 8)
.call(force.drag);
/*
// This can be used to place an image at each node
node.append('image')
.attr('xlink:href', 'nodeicon.png')
.attr('x', -70)
.attr('y', -70)
.attr('width', 140)
.attr('height', 140)
*/
var text = svg.selectAll('text')
.data(force.nodes())
.enter().append('text')
.attr('x', 5)
.attr('y', -5)
.attr('width', 170)
.attr('class', 'nodename')
.text(function (d) { return d.name });
function tick () {
node.attr('transform', function (d) {
return 'translate(' + d.x + ',' + d.y + ')';
});
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; });
text.attr('transform', function (d) {
return 'translate('...