javascript - 如何自定义 d3.js 中的某些文本？

Question

我有一些代码，我在 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}%* 上，我想控制这个星号并更改它的大小和颜色。

Answer 1

您可以使用 svg tspan设置 svg 中文本的字体大小和颜色 text元素:

Inside a element, text position, text properties, and font properties can be adjusted with with the element (MDN)

您可以使用 selection.append("text").html(string) 将 tspan 附加到文本中其中字符串类似于 text <tspan font-size="10" fill="orange">text</tspan> .

或者您可以将两个附加链接在一起:一个用于附加和设置文本，一个用于向文本添加 tspan(因为您的 tspan 将落在文本的末尾):

selection.append("text")
 .text(d=>d.someText)
 .filter(function(d) { return d.doesElementNeedAsterisk })
 .append("tspan")
 .text("*");

后一种选择如下所示:

var data = [
  {text1:"text1",color:"steelblue",size:"30px",asterisk:true},
  {text1:"text2",color:"crimson",size:"40px",asterisk:true},
  {text1:"text3",asterisk:false},
 ];

var svg = d3.select("body")
  .append("svg");
  
svg.selectAll("text")
  .data(data)
  .enter()
  .append("text")             // add text elements
  .attr("x", 20)
  .attr("y", (d,i)=> i* 50+50)
  .text(d=>d.text1)          // set the text
  .attr("font-size",20)
  .filter(function(d) {      
    return d.asterisk;       // filter for values that show asterisks
  })
  .append("tspan")           // append a tspan to these text elements
  .text("*")
  .attr("fill", d=>d.color)  // set color
  .attr("font-size",d=>d.size);  // set font size.

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>