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

【问题标题】：create a tag "<text>" part of the word is cut. c3.js - d3.js创建一个标签“<text>”部分的单词被剪切。 c3.js - d3.js
【发布时间】：2016-07-07 12:09:30
【问题描述】：

我正在添加一个<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/

【问题讨论】：

标签： javascript jquery d3.js c3.js

【解决方案1】：

c3.js 正在将剪辑路径应用于轴。我不太了解c3 的内部结构，所以我不确定他们为什么要这样做。但是你可以删除它：

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

更新fiddle。

【讨论】：

@yavg，不要试图粗鲁，但如果您需要在基于 SVG 的图表和图形中开发更高级的功能，则需要研究所使用的技术。例如，SVG clippaths 上有 lots 的 documentation。
@Mark 在 Meta 上有很多关于这些问题的讨论 meta.stackoverflow.com/questions/319937/… 我个人建议不要因为缺乏研究等原因回答它们。
@Ian，感谢您的提醒。在我回答了前 3 个问题后，我就抓住了“二重奏”，然后放弃了。