How to use the d3-scale-chromatic.schemeCategory10.slice function in d3-scale-chromatic

adductColors() {
      if (!this.annotations) {
        return []
      }
      // no adducts apart from current annotation
      if (this.annotations.length === 1) {
        return [graphColors[0]]
      }
      // taking last colors from the palette
      const colors = graphColors.slice(-this.annotations.length + 1)
      // replacing color of the current annotation with the 1st palette color
      const curAnnIdx = this.annotations.findIndex(a => a.adduct === this.annotation.adduct)
      colors.splice(curAnnIdx, 0, graphColors[0])
      return colors
    },
    adductLegendItems() {

export function colors(node: HTMLElement) {
  const id = uniqueId('col');
  node.insertAdjacentHTML('beforeend', `<datalist id="${id}L">${schemeCategory10.map((d) =&gt; `<option value="${d}"></option>`).join('')}</datalist>`);
  node.insertAdjacentHTML('beforeend', `<datalist id="${id}LW"><option value="#FFFFFF"></option>${schemeCategory10.slice(0, -1).map((d) =&gt; `<option value="${d}"></option>`).join('')}</datalist>`);

  node.insertAdjacentHTML('beforeend', `<strong>Solid Color</strong>`);
  {
    for (const colors of [schemeCategory10, schemeAccent, schemeDark2, schemePastel1, schemePastel2, schemeSet1, schemeSet2, schemeSet3]) {
      node.insertAdjacentHTML('beforeend', `<div class="lu-color-line">
        ${colors.map((d) =&gt; `<div class="lu-checkbox-color"><input value="${d}" type="radio" name="color" id="${id}${fixCSS(d)}"><label style="background: ${d}" for="${id}${fixCSS(d)}"></label></div>`).join('')}
      </div>`);
    }
    node.insertAdjacentHTML('beforeend', `<div class="lu-checkbox"><input value="solid:custom" type="radio" name="color" id="${id}O">
      <label for="${id}O"><input list="${id}L" name="solid" type="color"></label>
    </div>`);
  }
  node.insertAdjacentHTML('beforeend', `<strong>Sequential Color</strong>`);
  {
    for (const colors of sequentialColors) {
      node.insertAdjacentHTML('beforeend', `<div class="lu-checkbox lu-color-gradient"><input value="${colors.name}" type="radio" name="color" id="${id}${colors.name}"></div>

protected build(node: HTMLElement) {
    node.classList.add('lu-rename-dialog');
    const id = uniqueId('col');
    node.insertAdjacentHTML('beforeend', `
      <datalist id="${id}L"><option value="${Column.DEFAULT_COLOR}"></option>${schemeCategory10.slice(1).map((d) =&gt; `<option>${d}</option>`).join('')}</datalist>
      <input placeholder="name" required="" value="${this.column.label}" type="text">
      <textarea placeholder="Description" rows="5">${this.column.description}</textarea>`);
  }