Accepted answer

You did it right when you passed an array to the domain() method...


...however, that's not enough: arrays can contain numbers, strings, functions, other arrays etc. The problem with a band (or ordinal) scale is that you cannot have objects as the individual elements of the array. We can see why by having a look at the source code:

scale.domain = function(_) {
    if (!arguments.length) return domain.slice();
    domain = [], index = new Map();
    for (const value of _) {
      const key = value + "";
      if (index.has(key)) continue;
      index.set(key, domain.push(value));
    return scale;

If you have a look at for (const value of _) { const key = value + "";, which internally generate the unique keys for a JavaScript Map, you'll see that this simply won't work for objects:

const obj1 = {foo:42};
const obj2 = {bar:17};
console.log(obj1 + "");
console.log(obj2 + "");
console.log(obj1 + "" === obj2 + "");

The most important information in the snippet above is the true in the last console.log: all objects, even if different, become the same thing for the scale when it generates the keys for the Map (remember, band scales cannot have duplicated values).

Because of that, the continue here...

if (index.has(key)) continue;

...will always happen, so your domain effectively has just one element.

Related Query

More Query from same tag