javascript - 在 c3.js - d3.js 中将第 2 个字母以粗体显示

Question

在我的代码中，我在栏旁边收到一条文本。我希望每个文本字符串(“我的文本”)的前 2 个单词都是粗体。

我是 d3.js 的新手，然后我不确定如何使用此属性或其他内容为“我的文本”创建标签。通常这会创建

<Label> my text </ label> one
<Label> my text </ label> two
<Label> my text </ label> three

d3.js 但我不知道如何。我只关心“我的文字”是粗体。

这是我的代码

    chartData=[
      ['data1',60,10,4,20],
      ['data2',30,30,5,20],
      ['data3',30,30,4,20]

    ]

    var chart = c3.generate({
        bindto: '#chart',
        size: {
            height: 500,
        },
        data: {
            columns: chartData,
            colors:{
              data1:'#00af50',
              data2:'#F7931E',
              data3: '#FF0000'
            },
            names:{
              data1:'namedata1',
              data2:'namedata2',
              data3:'namedata3'

            },

            type:'bar',

            labels: {
              //format: function (v, id, i, j) { return "Default Format"; },
              format: {

               data1: function (v, id, i, j) { 
                 return "my text one"; 
               },
                data2: function (v, id, i, j) { 

                 return "my text two"; 
               },
                data3: function (v, id, i, j) { 

                 return "my text three"; 
               },
              }
            }
        },


        tooltip: {
            show: false
        },    
        legend: {
            show: false
        },
        axis: {
            rotated: true,
            x: {
                type: 'category',
                categories: ['001', '002','003','004'],
                 tick: {

                 format: function (d) { 
                  return "" ; }
                }
            }        
        }    
    });

    var arrayOfPics = [
      "http://lorempixel.com/40/40/abstract",
      "http://lorempixel.com/40/40/animal",
      "http://lorempixel.com/40/40/business",
      "http://lorempixel.com/40/40/cats",
      "http://lorempixel.com/40/40/sports",
      "http://lorempixel.com/40/40/food"
    ];


    d3.selectAll('.c3-axis-x .tick')
      .each(function(d,i){
        // clear tick contents and replace with image
        var self = d3.select(this);
      //  self.selectAll("*").remove();
        self.append('image')
          .attr("xlink:href", arrayOfPics[i])
          .attr("x", -40)
          .attr("y", -20)
          .attr("width", 25)
          .attr("height", 25);
    });

https://jsfiddle.net/qgxxvgxw/

Answer 1

我对c3不太熟悉。但您可以使用 d3.js 来实现这一点。

updateLabels();
function updateLabels (){
    d3.selectAll('.c3-chart-texts .c3-text').each(function(){
       var text = d3.select(this).text();
       var openTSpan = '<tspan style="font-weight:bolder;">', closeTSpan = '</tspan>';
       text = text.split(' ');
       text.unshift(openTSpan)
       text.splice( 3, 0, closeTSpan );
       var newText = text.join(" ");
       this.innerHTML = newText;   
    });
}

更新:

要在缩放后更新图表标签，请尝试以下代码。

zoom: {
    enabled: true,
    onzoom: function (domain) {
      updateLabels();
    }
}

要在屏幕调整大小后更新图表标签:

onresized: function(){
    updateLabels();
}

更新的 fiddle :https://jsfiddle.net/hf4v1aso/1/