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

Question

在我的代码中，我在条形图旁边得到了一条文本。我希望每个文本字符串 ("my text") 的前 2 个单词是粗体。

我是 d3.js 的新手，所以我不确定如何使用属性或其他东西为 "my text" 创建标签。通常这会创建

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

d3.js可是我不知道怎么办。我只关心 "my text" 大胆。

这是我的代码

    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

您可以创建一个函数来将句子的前两个单词大写，然后通过传递您的实际句子来调用它。

function capitalize(str) {
  var indexOne = str.indexOf(' ');
  var indexTwo = str.indexOf(' ', indexOne + 1);
  var capStr = str.slice(0, indexTwo).toUpperCase();
  return capStr + str.slice(indexTwo);
}

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

Answer 2

我对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/

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

put 2 first letters in bold in c3.js - d3.js

javascript

jquery

d3.js

c3.js