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": {}
    });

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

Answer 1

不幸的是，d3pie（see this issue）目前不支持换行。

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

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

示例：

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

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

d3饼图文本标签包装

1 个答案: