RuntimeError: circular definition after drag end

1

After a rectangle is repositioned using drag I need to re-draw the chart to resolve any overlaps.
This creates a RuntimeError: circular definition d3 v6 due to circular dependencies which are not allowed with ES6. Is there a workaround for this?

function draw() {
var Enter = group.enter()
                .append("rect")
                .attr("class", "lefthand")
                .attr("width", function (d) { return xt(new Date(d.finish)) - xt(new Date(d.start)) })
                .attr("x", function (d) { return xt(d.start) })
                .attr("y", function (d) { return env.yScale(d.sub) - lineHeight / 2 })
                .call(d3.drag()
                    .on("start", dragstartedl)
                    .on("drag", draggedl)
                    .on("end", dragendedl))
}


function dragended(d) {

            resolveOverlaps
            event = null
            draw();
}
2

Solved this by making a series of selections and updating specific attributes e.g.

d3.selectAll(".rectangle")

Previous code didn’t utilise d3 properly, it was basically a full re-run of the chart