An arrow function is compact JavaScript function syntax used here as a D3 accessor: it receives bound data and returns an attribute value for each SVG rectangle. section 3.3.1
Use these formatting rules:
- Omit parentheses around one parameter, as in d => d.count; wrap multiple parameters, as in (d, i). section 3.3.1
- Return a single expression directly; use braces and an explicit return statement for a multiline function body. section 3.3.1
- Use the index parameter to calculate positions, such as placing each bar five pixels below the previous one. section 3.3.1
const barHeight = 20;
svg
.selectAll("rect")
.data(data)
.join("rect")
.attr("class", d => {
console.log(d);
return "bar";
})
.attr("width", d => d.count)
.attr("height", barHeight)
.attr("x", 0)
.attr("y", (d, i) => (barHeight + 5) * i)
This D3 chain uses arrow functions to derive rectangle width from data and vertical position from the data index. section 3.3.1
Highlighting one bar
An arrow function can also choose an attribute conditionally: d => d.technology === "D3.js" ? "yellowgreen" : "skyblue". section 3.3.1
