dragGantt = {
function started() {
d3.select(this).classed("static", false);
d3.select(this).classed("dragged", true);
}
function dragged(event, d) {
let x = event.x;
if (x < xGanttScale.range()[0]) x = xGanttScale.range()[0];
else if (x > xGanttScale.range()[1]) x = xGanttScale.range()[1];
updateGantt(x);
dispatcher.call("syncValues", this, xGanttScale.invert(x));
}
function ended() {
d3.select(this).classed("dragged", false);
d3.select(this).classed("static", true);
}
return d3.drag().on("start", started).on("drag", dragged).on("end", ended);
}
dragValue = function (index) {
function started() {
d3.select(this).classed("static", false);
d3.select(this).classed("dragged", true);
}
function dragged(event, d) {
let x = event.x;
if (x < xValueScale[index].range()[0]) x = xValueScale[index].range()[0];
else if (x > xValueScale[index].range()[1])
x = xValueScale[index].range()[1];
updateValue(index, x);
dispatcher.call(
"syncValues",
this,
valueScale[index].invert(xValueScale[index].invert(x)),
index
);
}
function ended() {
d3.select(this).classed("dragged", false);
d3.select(this).classed("static", true);
}
return d3.drag().on("start", started).on("drag", dragged).on("end", ended);
}
dispatcher = d3.dispatch("syncValues")
dispatcher.on("syncValues", function (date, sourceIdx = null) {
if (sourceIdx !== null) updateGantt(xGanttScale(date));
valueName.forEach((_, i) => {
if (i !== sourceIdx) updateValue(i, xValueScale[i](valueScale[i](date)));
});
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
