时间戳

首页 > 解决方案 > 如何设置垂直刻度的周期？

javascript - 如何设置垂直刻度的周期？

问题描述

我使用 d3 库版本 5.7.0。我制作简单的图表。纵轴有几个刻度？这些刻度的周期为 5000。

JSFIDDLE

但我需要 10000 期。请帮帮我。

js代码：

xScale = d3.scaleLinear()
  .domain([0, 100000])
  .range([paddingYaxis, w - padding]);

yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => +d['price'] + yPeriod)])
  .range([h - padding, tickSize]);

xAxis = d3.axisBottom(xScale)
  .tickSizeInner(0)
  .tickSizeOuter(tickSize)
  .tickPadding(tickPadding);

yAxis = d3.axisLeft(yScale)
  .tickSizeInner(-(w - paddingYaxis - tickSize * 2))
  .tickSizeOuter(0)
  .tickPadding(tickPadding)
  .tickFormat(d3.format(' '));

标签： javascriptd3.js

解决方案

这应该为各种范围（不仅仅是高达 50000）提供通用解决方案。刻度函数允许您选择一定数量的刻度，除以周期大小，给我们想要的结果。

yAxis = d3.axisLeft(yScale)
  .tickSizeInner(-(w - paddingYaxis - tickSize * 2))
  .tickSizeOuter(0)
  .tickPadding(tickPadding)
  .tickFormat(d3.format(' '))
  .ticks(d3.max(data, d => +d['price'] + yPeriod) / 10000);

推荐阅读