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

Posted 2023-02-22

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

【英文标题】：create a tag "<text>" part of the word is cut. 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/

【参考方案1】：

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

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

更新fiddle。

【讨论】：

@yavg，不要试图粗鲁，但如果您需要在基于 SVG 的图表和图形中开发更高级的功能，则需要研究所使用的技术。例如，SVG clippaths 上有 lots 的 documentation。

@Mark 在 Meta 上有很多关于这些问题的讨论 meta.***.com/questions/319937/… 我个人建议不要因为缺乏研究等原因回答它们。

@Ian，感谢您的提醒。在我回答了前 3 个问题后，我就抓住了“二重奏”，然后放弃了。