JSFiddle - React, Tailwind, and code Playground

CSS

.node {
    fill: #000;
    color: white;
    transition: all 0.5s;
}
.node:hover {
    fill: orange;
    -webkit-transform: scale(1.5, 1.5);
    -moz-transform: scale(1.5, 1.5);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center; /* does not work (yet?), see http://stackoverflow.com/questions/23644269/svg-transform-scale-in-mozilla-physically-moves-svg-from-origin */
  transform-box: fill-box;
}
.node.fixed {
    fill: green;
}
.node.dragging {
    fill: red;
}
.link {
    stroke: #999;
    stroke-width: 5px;
}
.text {
    font-family:"sans-serif";
    font-size: 10px;
    fill: white;
}

JavaScript

// Note the placing of .on below!

(function () {

    var dataNodes = [
        { name: "Cost" },
        { name: "Scope" },
        { name: "Time" },
        { name: "another" },
        { name: "yao" },
    ];

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

    var width = window.innerWidth,
        height = window.innerHeight;

    var force = d3.layout.force()
        .size([width, height])
        .nodes(dataNodes)
        .links(dataLinks)
        .linkDistance(100)
        .charge(20)
        .on("tick", tick);

    var drag = force.drag()
        .on("dragstart", function (d) {
            d3.select(this).classed("dragging", true);
        })
        .on("dragend", function (d) {
            d3.select(this).classed("dragging", false);
            nodeDragstartFixed(d, this);
        })
    ;
    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);


    var links = svg.selectAll(".link")
        .data(dataLinks)
        .enter().append("line")
        .attr("class", "link");

    var nodes = svg.selectAll(".node")
        .data(dataNodes)
        .enter().append("circle")
        .attr("class", "node")
        .attr("r", 25)
        .on("dblclick", nodeDblclick)
        .call(drag);

    var text = svg.selectAll(".text")
        .data(dataNodes)
        .enter()
        .append("text").attr("class", "text")
        .text(function (d) { return d.name; })
    ;

    force.start();

    function tick() {
        links
            .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; });

        nodes
            .attr("cx", function (d) { return d.x; })
            .attr("cy",...