JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <button id="updatebutton">Update</button>
</body>

JavaScript

var color = d3.scale.category20();
var my_nodes = [{"cluster": 0, "x": 50, "y": 50},
                {"cluster": 0, "x": 100, "y": 50},
                { "cluster": 1, "x": 100, "y": 100}];

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

var force = d3.layout.force().size([300, 300]);

update(my_nodes);

function update(data) {

    force.nodes(data);
    force.on('tick', function (e) {
        circles.attr("transform", function (d, i) {
            return "translate(" + d.x + "," + d.y + ")";
        });
    });

    // DATA JOIN
    // Join new data with old elements, if any.
    var circles = vis.selectAll("circle").data(data);

    // ENTER
    // Create new elements as needed.
    circles.enter().append("svg:circle").attr("r", 5);

    // UPDATE
    // Update old elements as needed.
    circles.attr("cx", function (d) {return d.x;})
        .attr("cy", function (d) {return d.y;})
        .transition().duration(750)
        .style("fill", function (d) {
        return color(d.cluster)
    });
    // EXIT
    // Remove old elements as needed.
    circles.exit().remove();

    force.start();
}

var updateData = function () {
    var new_nodes = [{"cluster": 0, "x": 50, "y": 50}, 
                     {"cluster": 2, "x": 100, "y": 50},
                     {"cluster": 2, "x": 100, "y": 100},
                     {"cluster": 3, "x": 120, "y": 80}];
    update(new_nodes);
};

// Add the onclick callback to the button
d3.select("#updatebutton").on("click", updateData);