Html d3饼图文本标签换行
我正在使用创建一个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": {
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我已经添加了输出:)谢谢你在这里帮助我。我想我会选择较小的字体:)