https://linkedin.com/in/austince
Published
Edited
Jun 26, 2020
2 stars
v5Demo = makeDemo("d3@5 Demo", d3, { timeout: 175 })
v4Demo = makeDemo("d3@4 Demo", d3v4, { timeout: 175 })
fastDemo = makeDemo("d3@5 but slow", d3, { timeout: 350 })
cancelableClick = {
// Method is assumed to be a standard D3 getter-setter:
// If passed with no arguments, gets the value.
// If passed with arguments, sets the value and returns the target.
const rebindMethod = (target, source, method) => {
return (...args) => {
const value = method.apply(source, args);
return value === source ? target : value;
};
}
// Copies a variable number of methods from source to target.
const rebind = (target, source, ...methods) => {
for (let method of methods) {
target[method] = rebindMethod(target, source, source[method]);
}
return target;
};
// see: http://bl.ocks.org/ropeladder/83915942ac42f17c087a82001418f2ee
// based on: http://bl.ocks.org/couchand/6394506
return ({ tolerance = 5, timeout = 200, d3lib = d3 } = {}) => {
const dispatcher = d3lib.dispatch('click', 'dblclick');
const cc = (selection) => {
let downPt;
let lastTs;
let waitId;
let eventArgs;
selection.on('mousedown', (...args) => {
downPt = d3lib.mouse(document.body);
lastTs = Date.now();
eventArgs = args;
});
selection.on('mouseup', () => {
if (dist(downPt, d3lib.mouse(document.body)) >= tolerance) {
return;
}
if (waitId) {
window.clearTimeout(waitId);
waitId = null;
dispatcher.apply("dblclick", selection, eventArgs);
} else {
waitId = window.setTimeout(
() => {
dispatcher.apply("click", selection, eventArgs);
waitId = null;
},
timeout
);
}
});
};
return rebind(cc, dispatcher, 'on');
}
}
d3 = require("d3@5")
d3v4 = require("d3@4")
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.
