Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/77.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html d3饼图文本标签换行_Html_Css_D3.js_D3pie.js - Fatal编程技术网

Html d3饼图文本标签换行

Html d3饼图文本标签换行,html,css,d3.js,d3pie.js,Html,Css,D3.js,D3pie.js,我正在使用创建一个d3饼图。 这是我正在使用的配置 var pie = new d3pie("shpPie", { "size": { "canvasHeight": 350, "canvasWidth": 350, "pieOuterRadius": "50%", "pieInnerRadius": "50%" }, "data": {

我正在使用创建一个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": {}
    });
我的问题是,我得到的标签文本很长。数据超出了画布边界。我不能超过规定的尺寸,因为这是一个我正在开发的网站。无论如何,我都可以包装标签文本。
非常感谢您的帮助。

不幸的是,d3pie()目前不支持换行

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

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


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

你能用你期望的输出替换
吗?@dsummersl我已经添加了输出:)谢谢你在这里帮助我。我想我会选择较小的字体:)