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。

创建一个标签“<text>”部分单词被剪切。 c3.js - d3.js

1 个答案: