d3pie
d3pie copied to clipboard
benkeen
Text Positions
Any clue why the text is not centered? Is there a way to add the "padding-left" or "padding-top" attributes?
@brycemcdonald86 can you please provide your settings to investigate that further!?
<div id="wheel" align="center"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
<script src="//teammichele.co/charts/wheel/d3pie.min.js"></script>
<script>
var pie = new d3pie("wheel", {
"header": {
"title": {
"text": "The",
"fontSize": 27,
"color": "#000000",
"font": "garamond"
},
"subtitle": {
"text": "Wheel",
"color": "#000000",
"fontSize": 27,
"font": "garamond"
},
"location": "pie-center",
"titleSubtitlePadding": 1
},
"footer": {
"color": "#999999",
"fontSize": 10,
"font": "open sans",
"location": "bottom-left"
},
"size": {
"canvasHeight": 410,
"canvasWidth": 410,
"pieInnerRadius": "30%",
"pieOuterRadius": "100%"
},
"data": {
"content": [
{
"label": "Exercise",
"value": 100,
"color": "#76c4c0"
},
{
"label": "Medicine",
"value": 100,
"color": "#76c4c0"
},
{
"label": "Side Effects",
"value": 100,
"color": "#76c4c0"
},
{
"label": "Psychology",
"value": 100,
"color": "#76c4c0"
},
{
"label": "Caregivers",
"value": 100,
"color": "#76c4c0"
},
{
"label": "Treatment & Research",
"value": 100,
"color": "#76c4c0",
},
{
"label": "Nutrition",
"value": 100,
"color": "#76c4c0"
},
{
"label": "Oncology",
"value": 100,
"color": "#76c4c0"
}
]
},
"labels": {
"outer": {
"format": "none",
"pieDistance": 32
},
"inner": {
"format": "label"
},
"mainLabel": {
"color": "#ffffff",
"font": "arial",
"fontSize": 13
},
"percentage": {
"color": "#ffffff",
"decimalPlaces": 0
},
"value": {
"color": "#adadad",
"fontSize": 11
}
},
"misc": {
"gradient": {
"enabled": false,
"percentage": 100
}
},
callbacks: {
onClickSegment: function(a) {
if (a.data.label === 'Exercise') {
window.location = '#';
}
else if (a.data.label === 'Nutrition') {
window.location = '#'
}
else if (a.data.label === 'Medicine') {
window.location = '#'
}
else if (a.data.label === 'Side Effects') {
window.location = '#'
}
else if (a.data.label === 'Oncology') {
window.location = '#'
}
else if (a.data.label === 'Psychology') {
window.location = '#'
}
else if (a.data.label === 'Caregivers') {
window.location = '#'
}
else if (a.data.label === 'Treatment & Research') {
window.location = '#'
}
}
}
});
</script>
@mojoaxel
<div id="wheel" align="center"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
<script src="//teammichele.co/charts/wheel/d3pie.min.js"></script>
<script>
var pie = new d3pie("wheel", {
"header": {
"title": {
"text": "The",
"fontSize": 27,
"color": "#000000",
"font": "garamond"
},
"subtitle": {
"text": "Wheel",
"color": "#000000",
"fontSize": 27,
"font": "garamond"
},
"location": "pie-center",
"titleSubtitlePadding": 1
},
"footer": {
"color": "#999999",
"fontSize": 10,
"font": "open sans",
"location": "bottom-left"
},
"size": {
"canvasHeight": 410,
"canvasWidth": 410,
"pieInnerRadius": "30%",
"pieOuterRadius": "100%"
},
"data": {
"content": [
{
"label": "Exercise",
"value": 100,
"color": "#76c4c0"
},
{
"label": "Medicine",
"value": 100,
"color": "#76c4c0"
},
{
"label": "Side Effects",
"value": 100,
"color": "#76c4c0"
},
{
"label": "Psychology",
"value": 100,
"color": "#76c4c0"
},
{
"label": "Caregivers",
"value": 100,
"color": "#76c4c0"
},
{
"label": "Treatment & Research",
"value": 100,
"color": "#76c4c0",
},
{
"label": "Nutrition",
"value": 100,
"color": "#76c4c0"
},
{
"label": "Oncology",
"value": 100,
"color": "#76c4c0"
}
]
},
"labels": {
"outer": {
"format": "none",
"pieDistance": 32
},
"inner": {
"format": "label"
},
"mainLabel": {
"color": "#ffffff",
"font": "arial",
"fontSize": 13
},
"percentage": {
"color": "#ffffff",
"decimalPlaces": 0
},
"value": {
"color": "#adadad",
"fontSize": 11
}
},
"misc": {
"gradient": {
"enabled": false,
"percentage": 100
}
},
callbacks: {
onClickSegment: function(a) {
if (a.data.label === 'Exercise') {
window.location = '';
}
else if (a.data.label === 'Nutrition') {
window.location = ''
}
else if (a.data.label === 'Medicine') {
window.location = ''
}
else if (a.data.label === 'Side Effects') {
window.location = ''
}
else if (a.data.label === 'Oncology') {
window.location = ''
}
else if (a.data.label === 'Psychology') {
window.location = ''
}
else if (a.data.label === 'Caregivers') {
window.location = ''
}
else if (a.data.label === 'Treatment & Research') {
window.location = ''
}
}
}
});
</script>
The calculation of the title position is "still not fully correct" in the code. That is why the title/subtitle is not perfectly centered vertically. The project is not maintained anymore, so I'm not sure if it's worth providing a pull request with a fix.
The strange horizontal disposition could by fixed by resetting the horizontal canvasPadding:
"misc": {
"canvasPadding": {
"left": 0,
"right": 0
}
}
I hope this helps!