如何防止 Nivo 刻度轴文本（条形图）中的文本截断

Question

我的 Y 轴键（或刻度）很长，它们被截断了但这并不是因为图形本身没有足够的宽度，使用检查工具，我可以看到为它分配了足够的 space ，但是分配给整个图形的框架是不够的......而且那应该是 ResponsiveBar...

更改 X 轴的“变换”值会使文本完整显示（几乎），但图例会被截断：

如何让它们完整显示？在文档中找不到我的答案。

这里是重现问题的沙盒：https://codesandbox.io/s/missing-legends-text-pns6v

重要：'width' 不是问题，它以某种方式覆盖了一条白线...另外，我尝试了很多 'width' 尺码

我指的问题是这样的：

很想知道是否有一种方法可以将文本换行，或者通过添加悬停效果来截断以显示全文

Answer 1

解决方案 1：增加保证金

您可以在 ResponsiveBar 的 margin 中设置 left 属性。在以下示例中设置为 240px：

<ResponsiveBar
  ........
  margin={{ top: 50, right: 150, bottom: 50, left: 240 }}
  ........
/>

您还需要更新容器样式以展开图表，例如将边距设置为 0：

style={{
    .....
    margin: "0"
}}

结果：

Sandbox

解决方案 2：工具提示

如果你不想增加保证金，你可以在 axisLeft props 和 :

中覆盖 format 函数

像New York, Manhatta...
添加一个 <title> 标签来显示工具提示：

axisLeft={{
    format: (v) => {
        return v.length > 10 ? (
            <tspan>
            {v.substring(0, 10) + "..."}
            <title>{v}</title>
            </tspan>
        ) : (
            v
        );
    },
    tickSize: 5,
    tickPadding: 5,
    tickRotation: 0,
    legend: "",
    legendPosition: "middle",
    legendOffset: -40
}}

checkout this post

Sandbox

如何防止 Nivo 刻度轴文本（条形图）中的文本截断

How to prevent text truncation in Nivo ticks' axis text (Bar Chart)

charts

bar-chart

reactjs

nivo-react

解决方案 1：增加保证金

解决方案 2：工具提示