d3饼图文本标签换行

Question

我正在使用 d3pie.js 创建 d3 饼图。这是我正在使用的配置。

 var pie = new d3pie("shpPie", {
        "size": {
            "canvasHeight": 350,
            "canvasWidth": 350,
            "pieOuterRadius": "50%",
            "pieInnerRadius": "50%"
        },
        "data": {
            "sortOrder": "value-asc",
            "content": [
                  {"label":"Total Foreign","value":3.55},
                  {"label":"Total Institutions","value":0.89},
                  {"label":"Total Govt Holding","value":0},
                  {"label":"Total Non Promoter Corporate Holding","value":0.20},
                  {"label":"Total Promoters","value":12.13},
                  {"label":"Total Public & Others","value":3.20}
                ]
        },
        "labels": {
            "outer": {
                "pieDistance": 20
            },
            "inner": {
                "hideWhenLessThanPercentage": 3
            },
            "mainLabel": {
                "fontSize": 11
            },
            "percentage": {
                "color": "#ffffff",
                "decimalPlaces": 0
            },
            "value": {
                "color": "#adadad",
                "fontSize": 11
            },
            "lines": {
                "enabled": true
            },
            "truncation": {
                "enabled": true,
                "truncateLength": 20
            }
        },
        "tooltips": {
            "enabled": true,
            "type": "placeholder",
            "string": "{label}: {percentage}%"
        },
        "effects": {
            "pullOutSegmentOnClick": {
                "effect": "linear",
                "speed": 400,
                "size": 8
            }
        },
        "misc": {
            "gradient": {
                "enabled": true,
                "percentage": 100
            }
        },
        "callbacks": {}
    });

我的问题是，我输入的标签文本很长。数据超出 canvas 边界。我不能超过定义的大小，因为它是我正在处理的一个网站。无论如何我可以包装标签文本。任何帮助将不胜感激。

Answer 1

遗憾的是，d3pie (see this issue) 目前不支持换行。

但是，您可以关闭截断并使用较小的字体：

...
...
"mainLabel": {
    "fontSize": 9
},
...
...
"truncation": {
    "enabled": false
}
...
...

示例：

https://jsfiddle.net/dsummersl/mw3660ex/

使用那个长标签时，工具提示也会被截断。我建议将 string 从 {label}: {percentage}% 更改为 {percentage}%，或者完全关闭它。

d3饼图文本标签换行

d3 pie chart text label wrap

html

css

d3.js

d3pie.js