D3 - 使用字符串作为轴刻度

const svg = d3.select("body")
    .append("svg")
    .attr("width", 600)
    .attr("height", 300);

const xScale = d3.scaleLinear()
    .domain([0, 10])
    .range([50, 550]);

const yScale = d3.scaleLinear()
    .domain([0, 10])
    .range([50, 250]);

const xAxis = d3.axisBottom(xScale)
    .ticks(10)
    .tickFormat(d3.format("d"));

const yAxis = d3.axisLeft(yScale)
    .ticks(10)
    .tickFormat(d3.format("d"));

svg.append("g")
    .attr("transform", "translate(0, 250)")
    .call(xAxis);

svg.append("g")
    .attr("transform", "translate(50, 0)")
    .call(yAxis);

svg.selectAll("circle")
    .data([1, 2, 3, 4, 5])
    .enter()
    .append("circle")
    .attr("cx", (d, i) => xScale(i))
    .attr("cy", (d, i) => yScale(d))
    .attr("r", 10)
    .attr("fill", "steelblue");