31:[] 2f:{"title":"Centering Text Inside a Circle","cells":[{"id":0,"value":"md`# Centering Text Inside a Circle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`### Not centered`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"uncentered = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`### Centered with JS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"centeredWithJs = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"md`Something feels a bit off about this...and I'm not sure what. Checking with the inspector, the bounding box of \"A\" doesn't seem to hug the letter very tightly.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"// Function that takes in an SVG element containing a circle and a text element. Centers the text\n// element inside the circle using the text element's bounding box.\nfunction center(example) {\n // Get current x and y values.\n let letter = d3.select(example).select('text');\n let x = Number(letter.attr('x'));\n let y = Number(letter.attr('y'));\n \n // Get bounding box and compute the center point.\n let bb = letter.node().getBBox();\n console.log('Bounding box:', bb);\n let centerX = bb.width / 2;\n let centerY = bb.height / 4;\n console.log(`Center point: (${centerX}, ${centerY})`);\n \n // Adjust x and y.\n letter.attr('x', x - centerX);\n letter.attr('y', y + centerY);\n \n return [(x - centerX), (y + centerY)];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"// Call center with the example above.\ncenter(centeredWithJs)","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"md`### Centered with SVG properties\n\nUsing text-anchor=\"middle\" and alignment-baseline=\"central\":`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"centeredWithProps = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`This version is easy and requires no JavaScript, but it's useless for D3's force-directed graphs. While it is possible to wrap every node and text label in a group element, g tags don't have ${tex`x`} and ${tex`y`} coordinates. Instead, they must be translated via transforms (i.e. \"transform=\"translate(x, y)\") which is noticeably laggy.\n\nIt also doesn't center vertically in Firefox.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"md`### Centered manually`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"centeredManually = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`For this one, I just eye-balled the letter into place. In my opinion, it looks superior to the previous two. The horizontal centering of the computed version feels a bit too far to the left and a bit too far down vertically.\n\nThe point I choose: ${tex`(155, 238)`} is close to the computed center ${tex`(153.34, 240.40)`} but not identical.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`### With a monospaced font`","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"md`Could a monospaced font be easier to center programmatically? Let's try it with [Fira Mono](https://fonts.google.com/specimen/Fira+Mono).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"FiraMono = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"firaCircle = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"center(firaCircle)","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"md`That actually looks pretty good!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}