Как создать двухцветную столбчатую диаграмму в d3.js и svg?

Question

Я относительно новичок в d3.js. Я пытаюсь реализовать вертикальную гистограмму, которая заполнена основным цветом и серым цветом. Основной цвет используется для указания процентного содержания серого цвета. Таким образом, если данные составляют 25% от определенного числа, столбец показывает 25% основного и 75% серого.

Вот что у меня есть.

 const height = 342 - margin.top - margin.bottom;
  const maxDomain = 100;


const svg = window.d3.select(`#${elem}`)
    .append('svg')
      .attr('id', `${elem}-svg`)
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)

Оператор Switch, используемый для заполнения цветов

export const getChartColor = type => {
  switch (type && type.toLowerCase()) {
    case 'chat':
    case 'clavarder':
      return '#FC7A2D'
    case 'apple':
      return '#64686D'
    case 'facebook':
      return '#5975D6'
    case 'mtc':
    case 'text':
    case 'texte':
      return '#04AEE4'
    case 'google':
      return '#FD5A64'
    case 'other':
      return '#C1C2C3'
  }

Здесь я использую данные для заполнения svg. Примечание. {D.conversationRate} используется для заполнения высоты. Я бы хотел, чтобы остальная часть высоты была серой.

svg.selectAll('.bar')
    .data(data)
    .enter().append('rect')
    .attr('class', 'bar')
    .attr('x', d => xScaleBottom(d.name))
    .attr('y', d => yScale(Number(d.conversationRate)))
    .attr('width', xScaleBottom.bandwidth())
    .attr('height', d => height - yScale(d.conversationRate))
    .attr('fill', (d => getChartColor(d.name))

В этом случае серая часть стека должна указывать 100%. Таким образом, получается, что если случай равен 100%, тогда мне не понадобится серая часть графика.