drag = {
function dragstarted() {
d3.select(this).attr("stroke", "black");
}
function dragged(event, d) {
if(d.index == 1) {
if(Math.abs(event.x-PADDING) < Math.abs(event.y-PADDING-SIDELENGTH)) {
d3.select(this).raise().attr("cx", d.x=PADDING).attr("cy", d.y=(event.y < (PADDING+SIDELENGTH)/2 ? Math.max(event.y,PADDING) : Math.min(event.y,PADDING+SIDELENGTH)));
d3.select('#separator').attr("x1", d.x).attr("y1",d.y);
}else{
d3.select(this).raise().attr("cx", d.x=(event.x < (PADDING+SIDELENGTH)/2 ? Math.max(event.x,PADDING) : Math.min(event.x,PADDING+SIDELENGTH))).attr("cy", d.y=PADDING+SIDELENGTH);
d3.select('#separator').attr("x1", d.x).attr("y1",d.y);
}
}else{
if(Math.abs(event.x-PADDING-SIDELENGTH) < Math.abs(event.y-PADDING)) {
d3.select(this).raise().attr("cx", d.x=PADDING+SIDELENGTH).attr("cy", d.y=(event.y < (PADDING+SIDELENGTH)/2 ? Math.max(event.y,PADDING) : Math.min(event.y,PADDING+SIDELENGTH)));
d3.select('#separator').attr("x2", d.x).attr("y2",d.y);
}else{
d3.select(this).raise().attr("cx", d.x=(event.x < (PADDING+SIDELENGTH)/2 ? Math.max(event.x,PADDING) : Math.min(event.x,PADDING+SIDELENGTH))).attr("cy", d.y=PADDING);
d3.select('#separator').attr("x2", d.x).attr("y2",d.y);
}
}
}
function dragended() {
const m = -(d3.select('#separator').attr("y2")-d3.select('#separator').attr("y1"))/(d3.select('#separator').attr("x2")-d3.select('#separator').attr("x1"))
const yint = (PADDING+SIDELENGTH-d3.select('#separator').attr("y1"))/SIDELENGTH - (m*((d3.select('#separator').attr("x1")-PADDING)/SIDELENGTH))
const newdata = sample(N_ITERS,N_CUST,m,yint)
const newbins = d3.bin().domain([0,1]).thresholds(40)(newdata)
const xfn = d3.scaleLinear()
.domain([newbins[0].x0, newbins[newbins.length - 1].x1])
.range([margin.left, chartw - margin.right]);
const yfn = d3.scaleLinear()
.domain([0, d3.max(newbins, d => d.length)]).nice()
.range([charth - margin.bottom, margin.top]);
const xaxisfn = g => g
.attr("transform", `translate(0,${charth - margin.bottom})`)
.call(d3.axisBottom(xfn).ticks(width / 80 ).tickSizeOuter(0))
.call(g => g.append("text")
.attr("x", chartw - margin.right)
.attr("y", -4)
.attr("fill", "currentColor")
.attr("font-weight", "bold")
.attr("text-anchor", "end")
.text(newdata.x));
const yaxisfn = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yfn).ticks(charth / 40))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 4)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(newdata.y));
d3.select(this).attr("stroke", null);
d3.select("#test")
.selectAll("rect")
.data(newbins)
.join("rect")
.attr("x", d => xfn(d.x0) + 1)
.attr("width", d => Math.max(0, xfn(d.x1) - xfn(d.x0) - 1))
.attr("y", d => yfn(d.length))
.attr("height", d => yfn(0) - yfn(d.length));
d3.select('#xaxiscall').remove();
d3.select('#yaxiscall').remove();
d3.select('#test')
.append("g")
.attr('id','xaxiscall')
.call(xaxisfn);
d3.select('#test')
.append("g")
.attr('id','yaxiscall')
.call(yaxisfn);
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}