Question

在我的代码中，我在条形图旁边找到了一个文字。我希望每个文本字符串的前两个单词（＆＃34;我的文字＆＃34;）都是粗体。

我是d3.js的新手然后我不确定如何为＆＃34;我的文字＆＃34;创建标签。有这个属性或东西。通常这会创建

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

d3.js但我不知道怎么做。我只关心那个＆＃34;我的文字＆＃34;大胆。

这是我的代码

    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实现此目的。

final ViewPagerAdapter adapter = new ViewPagerAdapter(fragmentManager, tabLayout.getTabCount());

<强>更新

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

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();
    }
}

更新了小提琴：https://jsfiddle.net/hf4v1aso/1/

Answer 2

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

在c3.js中添加2个粗体字母 - d3.js

2 个答案: