Published
Edited
Jun 28, 2021
Importers
altocumulus's Logging
Adds logging functions in chained functions. See test below.
From: https://stackoverflow.com/questions/49802167/d3-console-log-in-a-function-chain/49802340https://stackoverflow.com/questions/49802167/d3-console-log-in-a-function-chain/49802340
Use by adding import {logging} from "@kalmdown/altocumuluss-logging"
test = {
d3.select("body")
.logMsg("Start")
.append("svg").selectAll(null)
.log(1, {}, "Test")
// .logSel() // this doesn't work well in Stack snippets
.data([1,2])
.enter().append("circle")
.attr("r", "10")
.logAttr("r")
.logData()
.logNodeData()
.logMsg("End");
}
logger = ({
log() { // Generic method logging all arguments.
console.log(...arguments);
return this;
},
logMsg(msg) { // Logging just a simple msg.
console.log(msg);
return this;
},
logSel() { // Log the selection.
console.log(this);
return this;
},
logAttr(name) { // Log the attributes with "name" for all selected elements.
this.each(function(d, i) {
let attr = d3.select(this).attr(name);
console.log(`Node ${i}: ${name}=${attr}`);
});
return this;
},
logData() { // Log the data bound to this selection.
console.log(this.data());
return this;
},
logNodeData() { // Log datum per node.
this.each(function(d, i) {
console.log(`Node ${i}: ${d}`);
});
return this;
}
});
assignLogging = Object.assign(d3.selection.prototype, logger);
d3 = require("d3@6")
d3loggin = d3, assignLogging
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.
