I need assistance with customizing the appearance of an asterisk added to the end of a template literal in d3js. I want to be able to independently adjust the size and color of the asterisk regardless of the variable it's attached to. Below is the code snippet.
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}%*`
});
Specifically pertaining to ${d.conversationRate}%*, I am looking for ways to modify the size and color of the asterisk.