drag = {
function dragstarted() {
}
function dragged(event, d) {
d3.select(this).raise().attr("x1", event.x).attr("x2",event.x)
}
function dragended(event, d) {
d3.select(this).attr("stroke", "black").attr('stroke-width', 15);
const bndryXPos = event.x;
console.log("x pos", bndryXPos);
d3.select('#chart')
.selectAll("circle.point")
.join(circles)
.each(function (d) {
d.group = d.x <= bndryXPos ? 0 : 1;
});
d3.select('#chart')
.selectAll('circle.point')
.transition()
.attr('fill', d => d.group === 0 ? 'red' : 'blue')
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}