Referencing data
To read a piece of data inside D3, you look up it’s property name using either a dot (.) or square brackets [].
The notation you use depends on the field names within your data. Using the wrong notation can cause your code to break, so it’s important to know the difference.
Which should you use?
Dot notation
Use the dot notation when the field name is a single string.
The name can only contain letters, numbers, underscores or dollar signs. It cannot start with a number or have spaces.
// Data looks like { Score: 95 }
.text(d => d.score)
Square Brackets
Use square bracket with quotation marks when the field name has special characters or spaces.
If you use a dot here, your code will break.
// Data looks like: { score total: 95 }
.text(d => d["score total"])Best Practice
When cleaning data or writing code, best practice is to always name your data fields as camelCase or with underscores. This allows you to use the dot notation everywhere, which helps keep your D3 code easy to read and less prone to typos.