D3图形-将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

以下解决方案可以解决问题- 将此答案归功于

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

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