d3 Change colour of tick on axis with function - d3.js

Question

I have an x axis in d3 with labels and circles for each tick. I want to change the colour of each dot with a function so that the colour comes from an array.
I have a function already that gets ticks from the array and positions them on the scale, but the same logic doesn't work for changing attributes of each circle.
I would like to be able to select each circle that is a child of the .tick class and change it's stroke attribute:
svg.selectAll(".tick", "circle")
.each(d => {
var dot = d3.select(d, "circle").attr("stroke", "red")
console.log("DOT", dot)
return dot
})
I would probably change the each to a proper for loop to iterate over both the data and circles arrays by matching indexes.
How would I make the circle colours correspond to those in the objects in the array 'data'?
import React, {useState, useEffect} from 'react';
import * as d3 from 'd3';
import './App.css';
function App() {
const [currentYear, setCurrentYear] = useState(2020);
const [maxYear, setMaxYear] = useState(30);
const [data, setData] = useState(
[
{x: 2020, colour: "purple", y1: 0.001, y2: 0.63},
{x: 2027, colour: "red", y1: 0.003, y2: 0.84},
{x: 2031, colour: "yellow", y1: 0.024, y2: 0.56},
{x: 2035, colour: "green", y1: 0.054, y2: 0.22},
{x: 2040, colour: "blue", y1: 0.062, y2: 0.15},
{x: 2050, colour: "orange", y1: 0.062, y2: 0.15}
]
);
const initialiseData = () => {
const svg = d3.select( "svg" );
const pxX = svg.attr( "width" );
const pxY = svg.attr( "height" );
const makeScale = ( accessor, range ) => {
console.log("RANGE", accessor, range)
return d3.scaleLinear()
.domain( d3.extent( data, accessor ) )
.range( range )
.nice()
}
const scX = makeScale( d => d["x"], [0, pxX - 50]);
const g = d3.axisBottom( scX ).tickValues(
data.map(d => {
return d.x
})
)
svg.append( "g" )
.attr( "transform", "translate(" + 25 + "," + pxY/2 + ")")
.call( g );
svg.selectAll(".domain").attr( "visibility", "hidden" );
svg.selectAll( ".tick" )
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 5)
.attr("fill", "white")
.attr("stroke", "grey")
.attr("stroke-width", "4px")
svg.selectAll(".tick line")
.attr("visibility", "hidden")
svg.selectAll( ".tick text")
.attr("font-size", 20)
.attr("dy", "1.5em")
svg.selectAll(".tick", "circle")
.each(d => {
var dot = d3.select(d, "circle")
console.log("DOT", dot)
return
})
}
useEffect(() => {
if (data) {
initialiseData();
}
}, [data])
return (
<div className="App">
<svg id="demo1" width="1200" height="400" style={{background: "lightgrey"}}/>
</div>
);
}
export default App;

Answer 1

Your svg.selectAll( ".tick" ).append("circle") creates the circles. Using selectAll is a little like doing a for loop: it creates many elements, and each time, the data is bound to the created element.
You can provide a function to .attr() (and most other things in D3) that takes as an argument the bound data, usually written d. If you put in a selectAll, it'll be applied to each element.
See Learn D3: Joins for a more complete explanation. Putting it all together:
svg.selectAll( ".tick" )
.data(data)
.append("circle")
.attr("fill", d => d.colour) // d is an element of the data: get colour from it