Как настроить определенный текст в d3.js?

У меня есть код, в котором я добавляю звездочку в конец литерала шаблона в d3js. Я хочу иметь возможность настраивать размер и цвет звездочки независимо от переменной. Вот мой код.

svg.selectAll('.text')
    .data(data)
    .enter()
    .append('text')
      .attr('class', d => {
        const shortName = getChannelShortName(d.name).toLowerCase();
        const channelEnabled = disabledChannels.includes(shortName);
        return !channelEnabled ? 'label x-axis-conversion-rate' : 'label x-axis-conversion-rate-disabled'
      })
      .attr('text-anchor', 'middle')
      .attr('x', d => xScaleBottom(d.name) + (d.subsetValue > 9 ? 45 : 45))
      .attr('y', d => -50)
      .text(d => {
        const shortName = getChannelShortName(d.name).toLowerCase();
        const channelEnabled = disabledChannels.includes(shortName);
        return !channelEnabled ? `${d.conversationRate}%` : `${d.conversationRate}%*`
      });

В ${d.conversationRate}%* я хочу получить контроль над этой звездочкой и изменить ее размер и цвет.