JSFiddle - React, Tailwind, and code Playground

by Simon Raper

JavaScript

var w = 500,
    h = 500;

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

var rectangle = svg.selectAll("rectangle")
    .data([10, 40, 70, 100]);

var drag = d3.behavior.drag()
    .on('dragstart', function () {
    d3.select(this).style('fill', 'red');
})
    .on('drag', function () {
    d3.select(this).attr('height', function (d) {
        return Math.abs(d3.event.y - 100)
    })
        .attr('transform', function (d) {
        return ("translate("+d+"," + (100-Math.abs(d3.event.y - 100)) + ")")
    });
}).on('dragend', function () {
    d3.select(this).style('fill', 'black');
});

rectangle.enter().append("svg:rect")
    .attr("height", 50)
    .attr("width", 15)
    .attr("transform", function (d) {
    return ("translate(" + d + ",50)")
})
    .call(drag);