是否可以使带有附加文本的轴刻度在 d3 中具有动态填充？

Question

我有 y 轴刻度，K 为千，M 为百万，来自 ticksFromat，然后我在其上附加一个英镑符号“£”，但有时如果数字太长它与井号重叠，反之亦然，当数字太短作为一个数字时，符号和数字之间的差距很大。有没有办法使它动态化，因为我认为在文本中添加 attr('dx', 'xpx') 可以解决这个问题，但这不起作用。

const yAxisTickFormat = (d) => {
  //Logic to reduce big numbers
  const limits = [1000000000000000, 1000000000000, 1000000000, 1000000, 1000];
  const shorteners = ["Q", "T", "B", "M", "K"];
  for (let i in limits) {
    if (d > limits[i]) {
      return (d / limits[i]).toFixed() + shorteners[i];
    }
  }
  return d;
};

const yAxis = d3
      .axisLeft()
      .scale(yScale)
      .tickFormat((d) => yAxisTickFormat(d))
      .ticks(6)
      .tickSize(-width, barMargin, 0)
      .tickPadding(10);

 svg
      .append('g')
      .attr('transform', `translate(${xMargin},${yMargin})`)
      .attr('class', 'yAxis')
      .call(yAxis)
      .attr('fill', '#65757E')
      .selectAll('.tick')
      .append('text')
      .attr('x', '-40px')
      .attr('y', '3.15px')
      .text((d) => (d == 0 ? null : '£'));

Answer 1

您能否尝试在 .tickFormat 中直接附加您的“£”符号，如下所示：

.tickFormat((d) => "£" + yAxisTickFormat(d)) 而不是将其附加到另一个文本元素中？

是否可以使带有附加文本的轴刻度在 d3 中具有动态填充？

Is it possible to make axis ticks with appended text to have dynamic padding in d3?

d3.js

format

data-visualization

axis