C3.js添加額外的信息打勾

Question

我有格式蜱：

   tick: { 
        fit: true, 
        multiline: false, 
        outer: false, 
        format: function (x) { 
         var value = this.api.categories()[x]; 
         if(value.length > 5) 
          return value.substring(0,5)+"..."; 
         else 
          return value; 
        } 
       }, 

value - 獨特的屬性。但是現在 - 我應該把它切成5個符號。

，我必須點擊打勾：

_.each(this.chart.element.querySelectorAll('svg g.c3-axis-x .tick text tspan'), (el) => { 
      el.onclick = (e) => this.someFunction(e) 
     }) 

在someFunction（）

- 我想唯一的屬性來獲得數據，當前滴答。

最早我得到了像angular.element(e.target).text()這樣的屬性，但它可以包含сropped屬性。我如何獲得當前指數？或其他東西來獲取全文

Answer 1

從c3圖表中的元素獲取數據/索引最好通過d3來完成，因爲這正是c3用於構建它們的原因。是否使用角度打破這種能力我不知道，但我不知道，因爲我不使用它

什麼是值得嘗試的，是如果你看看你以前的q（C3 js : large axis label）然後改變我的答案的一部分給人點擊能力在onrendered功能：

onrendered: function() { 
    var self = this; 

    d3.select(this.config.bindto) 
     .selectAll(".c3-axis-x .tick text") 
     .on ("click", function(d) { 
      console.log ("data val", d, "gives us ", self.api.categories()[d]) 
      // then do what you want 
     }) 
} 

http://jsfiddle.net/05hsk6yh/3/