d3-legend
d3-legend copied to clipboard
allow labels functions to return Promise (resolving with label text)
Motivation: fetch label text async (e.g. based on locale)
No breaking changes.
const asyncHelper = ( i,
genLength,
generatedLabels,
labelDelimiter) => {
// get a text value stored in firebase
return firebase.database().ref(pathToLocaleText).once('value').then(snap =>{
return snap.val();
})
}
example:
var thresholdScale = d3.scaleThreshold()
.domain([0, 1000, 2500, 5000, 10000])
.range(d3.range(6)
.map(function(i) { return "q" + i + "-9" }));
var linear = d3.scaleLinear()
.domain([0, 10])
.range(["rgb(46, 73, 123)", "rgb(71, 187, 94)"]);
// ----legendHelpers.thresholdLabels----
const promiseHelper = function({
i,
genLength,
generatedLabels,
labelDelimiter
}) {
//
const promise = Promise.resolve()
.then(function() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
let res;
if (i === 0) {
const values = generatedLabels[i].split(` ${labelDelimiter} `);
return resolve(`Less than ${values[1]}`);
} else if (i === genLength - 1) {
const values = generatedLabels[i].split(` ${labelDelimiter} `);
return resolve(`${values[0]} or more`);
}
return resolve(generatedLabels[i]);
}, 100);
});
});
return promise;
};
// ----legendHelpers.thresholdLabels----
const helper = function({
i,
genLength,
generatedLabels,
labelDelimiter
}) {
if (i === 0) {
const values = generatedLabels[i].split(` ${labelDelimiter} `);
return `Less than ${values[1]}`;
} else if (i === genLength - 1) {
const values = generatedLabels[i].split(` ${labelDelimiter} `);
return `${values[0]} or more`;
}
return generatedLabels[i];
};
const legend = d3.legendColor()
.labelFormat(d3.format('.2f'))
.title('Sync labels')
.labels(helper)
.useClass(true)
.scale(thresholdScale);
const promiseLegend = d3.legendColor()
.labelFormat(d3.format('.2f'))
.title('Async labels (Promise)')
.labels(promiseHelper)
.useClass(true)
.scale(thresholdScale);
d3.select('#legend .legend')
.call(legend);
d3.select('#promiseLegend .legend')
.call(promiseLegend);
Thanks for putting this together. Do you know of package to polyfill Promises? I want this package to still be able to work in IE. I tried using the babel-plugin-es6-promise
but ran into a grunt error that was difficult to decipher.
Randomly looking since I submitted a pull request. We used es6-shim and/or core.js to poly promises...