{"id":4100,"date":"2016-05-11T12:50:51","date_gmt":"2016-05-11T12:50:51","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=4100"},"modified":"2016-05-11T12:50:51","modified_gmt":"2016-05-11T12:50:51","slug":"d3-fixing-clipped-charts","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/d3-fixing-clipped-charts\/","title":{"rendered":"D3: Fixing clipped charts"},"content":{"rendered":"

If you make a chart in D3, you can get issues like this, where the axes get clipped:<\/p>\n

<\/p>\n

To fix the spacing between the charts, I would add space to the HTML element surrounding the chart. To fix the clipping inside, you need margin inside the chart – this is why all the D3 examples define a bounding box like so:<\/p>\n

\nlet margin = {top: 0, right: 0, bottom: 25, left: 0},\n    width = 200 - margin.left - margin.right,\n    height = 60 - margin.top - margin.bottom;\n<\/pre>\n
If you’ve done what most people have done, and copied existing examples, you should be able to just make this change:
\nlet margin = {top: 0, right: 5, bottom: 25, left: 5},
\n    width = 200 – margin.left – margin.right,
\n    height = 60 – margin.top – margin.bottom;<\/p>\n
And you’ll get a working chart:
\n<\/p>\n","protected":false},"excerpt":{"rendered":"
Fixing alignment issues in D3<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[9],"tags":[136,138,302],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t