score:1

Accepted answer

I don't understand why you need this:

let colors = d3.scaleOrdinal(d3.schemeCategory10);

You can define colors as an array:

const colors = ['orange', 'blue', 'green'];

... and then assign those colors to the legend's points and labels by index:

svg.selectAll("mydots")
  .data(first_stack)
  .enter()
  .append("rect")
  ...
  .style("fill", (d, i) => colors[i]);

// Add one dot in the legend for each name.
svg.selectAll("mylabels")
  .data(first_stack)
  .enter()
  .append("text")
  ...
  .text(d => d)
  .style("fill", (d, i) => colors[i]);

Related Query

More Query from same tag