D3 将 Y-Label 计数增加 10 秒而不是 5 秒答案

【问题标题】：D3 Make Y-Label Count by 10s instead of 5sD3 将 Y-Label 计数增加 10 秒而不是 5 秒
【发布时间】：2022-08-12 08:29:22
【问题描述】：

目前我正在 d3 中制作一个简单的折线图，但是正如您在我的图像中看到的那样，y 标签以 5s 为单位计数，这使得它看起来非常局促。对于我的特定用例，将其计数为 10 秒会完全正常，但我不确定如何指定这一点，并且很难寻找有用的资源。

以下是当前按 5s y-label 计数的图形： Graph

这是我的 y-label 绘图的相关代码（最后 4 行是 y-label 的特定绘图）：

const { data } = props

const width = 800
const diaHeight = 200

const diaGraph = d3
   .select(\'#dia-graph\')
   .append(\'svg\')
   .attr(\'width\', width + margin.left + margin.right)
   .attr(\'height\', diaHeight + margin.top + margin.bottom)
   .append(\'g\')
   .attr(\'transform\', `translate(${margin.left},${margin.top})`)
   .data(data)

const dia_yScale = d3
   .scaleLinear()
   .range([diaHeight, 0])
   .domain([50, 120])

diaGraph
   .append(\'g\')
   .attr(\'class\', \'y-axis\')
   .call(d3.axisLeft(dia_yScale))

标签： javascript reactjs d3.js

【解决方案1】：

您可以尝试通过ticks 函数调整轴中建议的刻度数。它看起来像.call(d3.axisLeft(dia_yScale).ticks(7))。尝试不同数量的刻度可能会给您想要的结果。这不一定保证滴答声将按 10 计数。为此，您可以使用 tickValues 函数显式设置所需的刻度值。

【讨论】：