如何在 C3.js 饼图中居中标签

【问题标题】：How to center labels inside a C3.js piechart如何在 C3.js 饼图中居中标签
【发布时间】：2016-02-29 14:33:35
【问题描述】：

每个饼图弧内的标签位于边缘。我想使用 css（.c3-arcs 文本选择器）使文本更大，但文本被截断。有没有办法让标签在每个弧内居中？

这是jsbin demo

【问题讨论】：

在 SVG 绘图中渲染它们时，实际上使用 css 进行操作会很棘手......
@Pogrindis 除了css还有别的办法吗？我一直在浏览他们的文档，但找不到任何修改这些职位的选项。
似乎他们为此使用了d3.format() 方法，但似乎没有任何“开箱即用”的解决方案可以解决您的问题..

标签： javascript d3.js svg c3.js

【解决方案1】：

Coworker 使用text-anchor 提出了一个解决方案，这并不完美，但会将标签移到更靠近中心的位置。

.c3-chart-arcs text { 
    text-anchor: start !important;
}

.c3-target-Large text {
    text-anchor: end !important;
}

更新jsbin

【讨论】：

猜你喜欢

1970-01-01
1970-01-01
1970-01-01
2018-04-08
2018-03-25
2019-06-15
2020-10-31
2015-09-02
1970-01-01

相关资源

下载 2021-06-26
下载 2023-01-22
下载 2023-02-14

最近更新更多

热门标签

Java Python linux javascript Mysql C# Docker 算法前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库数据结构大数据 js 机器学习微服务 Android Go 程序员面试 JVM ASP.net core 云原生人工智能后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习多线程 React 架构 devops 爬虫云计算 Spring Boot LeetCode