Element drawing and dragging using d3

In this post d3 is used to draw a stack of SVG rectangles based on a set of defined values such as starting position, vertical margin and an array of data. For each rectangle a dot is attached, which can be extended by a line by dragging.

The variables used are as follows:

The working application:


Dragging is achieved by d3's drag function as follows:

 
var dragme = d3.drag()
                .on("start", function (d) {
                    //when dragging starts
                })
                .on("drag", function () {
                    //during dragging
                })
                .on("end", function (d) {
                    //code to run when the drag is released
                });

The code gist is as follows: