D3 Graph - 将 y 轴更改为整数

Question

我正在尝试在 y 轴上创建整数波段。

已尝试将 .scaleband 更改为 .scalelinear 并且 .ticks “arbitraryMetric”存储为整数。

代码：

const categories = vizData.map(d => d.arbitraryMetric);

const yScale = d3
.scaleBand()
.domain(categories)
.range([0, vizHeight - timelineMargin.bottom]);

const labels = vizCanvas
.selectAll('text')
.data(categories)
.enter()
.append('text')
.style('font-family', style.fontFamily)
.style('fill', '#3C4043')
.attr('x', timelineMargin.left - 10)
.attr('y', d => yScale(d) + yScale.bandwidth() / 2)
.attr('text-anchor', 'end')
.text(d => d);

Answer 1

以下解决方案可以解决问题 - 归功于 this answer

const yAxisTicks = yScale.ticks()
    .filter(tick => Number.isInteger(tick));

const yAxis = d3.axisLeft(yScale)
    .tickValues(yAxisTicks)
    .tickFormat(d3.format('d'));