D3 相同的刻度在 y 轴上显示两次答案

【问题标题】：D3 same ticks being showed twice on y axisD3 相同的刻度在 y 轴上显示两次
【发布时间】：2021-08-13 11:39:06
【问题描述】：

在 y 轴上多次显示相同的刻度值（在本例中为 1M）。我认为问题不在于我如何使用yAxisTickFormat 格式化刻度。我做错了什么？

export const yAxisTickFormat = (d) => {
  //Logic to reduce big numbers
  const limits = [1000000, 10000, 1000];
  const shorteners = ['M', 'K', 'K'];
  for (let i in limits) {
    if (d > limits[i]) {
      return (d / limits[i]).toFixed() + shorteners[i];
    }
  }
  return d;
};

const maxValue = storeData.dataset.reduce((maxAll, item) => {
  return item.values.reduce((maxItem, val) => 
    Math.max(maxItem, val.value), maxAll);
}, 0);
    
const yScale = d3.scaleLinear().range([-120, height - 200]);

yScale.domain([maxValue, 0]);

 const yAxis = d3
  .axisLeft()
  .scale(yScale)
  .tickFormat((d) => (d === 0 ? null : '£') + yAxisTickFormat(d))
  .ticks(5)
  .tickSize(-width, barMargin, 0)
  .tickPadding(10);

【问题讨论】：

标签： javascript d3.js data-visualization bar-chart axis

【解决方案1】：

这是一个更正确的yAxisTickFormat（用 sn-p 测试）：

const yAxisTickFormat = (d) => {
  let limit = Math.pow(10, 12);
  const shorteners = ["T", "B", "M", "K"];
  for (let i = 0; i < shorteners.length; i++) {
    if (d >= limit) {
      const zeroPad = Math.floor(d / limit) === d / limit;
      return '£ ' + (d / limit).toFixed(zeroPad ? 0 : 1) + ' ' + shorteners[i];
    }
    limit /= 1000;
  }
  return d;
};

const svg = d3.select('svg');

const ranges = [5000, 2000000, 4000000000, 3500000000000];

ranges.forEach((range, index) => {
    const yScale = d3.scaleLinear().domain([range, 0]).range([0,300]);

const yAxis = d3
      .axisLeft()
      .scale(yScale)
      .tickFormat((d) => yAxisTickFormat(d))
      .ticks(10);
      
 svg.append('g').attr('transform', `translate(${50 + index * 100},50)`).call(yAxis);     
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="400" height="400"/>

【讨论】：

在这种情况下，低数字没有前置 £ 符号 imgur.com/a/RyKBNWt

【解决方案2】：

相反，问题在于数字格式。您正在传递1400000 和1200000，它们将转换为1M。通过将参数传递给.toFixed 方法，尝试在逗号后添加几个数字

export const yAxisTickFormat = (d) => {
  //Logic to reduce big numbers
  const limits = [1000000, 10000, 1000];
  const shorteners = ['M', 'K', 'K'];
  for (let i in limits) {
    if (d > limits[i]) {
      return (d / limits[i]).toFixed(1) + shorteners[i];
    }
  }
  return d;
};

这会将您的数字相应地转换为 1.4m 和 1.2m。

【讨论】：