时间戳

首页 > 解决方案 > 如何设置 d3 linearScale 刻度开始和每个停止长度

d3.js - 如何设置 d3 linearScale 刻度开始和每个停止长度

问题描述

我想更改 linearScale 刻度开始和停止长度。说一个线性刻度域（0-100），但刻度从 20 开始，每个刻度停止 10。使用时scale.ticks()生成刻度列表，如：[20、30、40、50、60、70、80、90、100]。我怎样才能做到这一点？

标签： d3.jscharts

解决方案

在没有看到您的代码的情况下生成适当的方法有点困难，但是我已经使用一些通用名称为您编写了一些东西，假设您使用了一个名为xScale.

有很多方法可以做到这一点，但最简单的是生成 10 个刻度，但只显示具有相关值的刻度。

const ticksNum = 10

const yourAxis = svg.
     .append('g')
     .attr('class', 'axis x')
     .call(
     d3.axisBottom(xScale)
     .tickFormat(d3.format(''))
     .ticks(ticksNum)
     )

d3.select('.x.axis')
  .selectAll('g.tick')
     .select('text')
     .style('visibility', d => {
       if(d===10){return 'hidden'}
       return 'visible')
     })
     .text(d => d)

如果您想排除多个刻度，只需编辑表示if(d===10)包含 10 以外的刻度值的行。

否则，您可以使用以下命令确保第一个刻度（或任何偏移量刻度i）是不可见的：

const ticksNum = 10

const yourAxis = svg.
     .append('g')
     .attr('class', 'axis x')
     .call(
     d3.axisBottom(xScale)
     .tickFormat(d3.format(''))
     .ticks(ticksNum)
     )

d3.select('.x.axis')
  .selectAll('g.tick')
     .select('text')
     .style('visibility', (d,i) => {
       if(i===0){return 'hidden'}
       return 'visible')
     })
     .text(d => d)

推荐阅读