"<text>"というタグを作成し、単語の一部を切り捨てます。 c3.js - d3.js

Question

私は<text>を追加しています。このラベルをYABADABADOOOOという言葉で紹介したいのですが、xとyに位置を割り当てて、好きな場所に配置します。

をそのテキスト（「YABADABADOOOO」）は完全には示されていないいくつかの奇妙な理由：このイメージで私が入れしたい場所を示しています。私に何ができる？

これは私のコードである：

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 "text 30 characters->.........."; 
     }, 
     data2: function (v, id, i, j) { 

     return "Format for data2"; 
     }, 
     data3: function (v, id, i, j) { 

     return "other text"; 
     }, 
     } 
    } 
}, 


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

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('text') 
    .attr("x", 50) 
    .attr("y", -110) 
    .style("text-anchor", "middle") 
.text("YABADABADOOOOO"); 

}); 

https://jsfiddle.net/zdndpd3x/

Answer 1

c3.jsは、軸にクリップパスを適用しています。私はc3の内部をあまり知らないので、なぜ彼らがこれをやっているのか分かりません。 しかし、あなたはそれを削除することができます

d3.select('.c3-axis-x').attr("clip-path", ""); 

はfiddleを更新しました。