javascript - 根据算术级数动态分配高度

Question

我正在用 d3 制作一种时间轴，我注意到如果某些事件在时间轴上很接近(彼此相隔几天)，那么易读性会受到很大影响。到目前为止，我最好的想法是尝试为高度分配一些逻辑。例如，下面我有它基于偶数/奇数。

graphGroup.selectAll('text')
    .data(data)
    .enter()
    .append('text')
    .attr('x', function(d) {return timeScale(d.date)-125})
    .attr('y', function(d,i) {
      if (i%2) {
        return 50-5;
      } else {
        return height/2-5;
      }
      })
    .text(function(d) {return formatTime(d.date)})
    //.attr('text-anchor','middle')
    .attr('class', 'date');

这一直有效到一个点，但根据我最新的数据集，我有 3-4 个事件背靠背，所以我想弄清楚如何垂直交错文本以形成一种重复的阶梯模式:1 ,2,3,1,2,3,1,2,3...

我尝试用 %3 替换 %2 但结果是一样的。然后我恍然大悟 -- 我必须以某种方式绘制高度图。

为了简单起见，假设:

var myHeightLogic: {
    h1:100,
    h2:300,
    h3:400
};

问题

我如何使用我的 myHeightLogic 变量为我的文本的 .attr('y', function(d,i) { }) 计算正确的高度重复楼梯模式？如果我想增加超过 4 个步骤，方法是否相同？我想找到最具可扩展性的方法。由于可整除数之间的重叠(例如，6 可同时被 2 和 3 整除)，这在数学上似乎很复杂。

Answer 1

您可以将数组和第二个参数提供的索引与余数运算符一起使用，正如您在问题中所推理的那样。 6 可以被 2 和 3 整除这一事实不是问题。

但是，由于您想要“可能的最具可扩展性的方法”，您可以利用 D3 序数尺度中的域这一事实，如果未指定，则从使用中推断出来。

因此，您可以这样做(使用新的比例构造函数语法):

const scale = d3.scaleOrdinal([100, 300, 400]) 

并将比例尺与您的索引一起使用。

这是一个演示:

const scale = d3.scaleOrdinal([100, 300, 400]);
d3.range(20).forEach(d => {
  console.log("index: " + d + " --- position: " + scale(d))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.8.0/d3.min.js"></script>

为什么不呢，一个视觉表示:

const svg = d3.select("svg");
const scale = d3.scaleOrdinal([0, 20, 40]);
const data = d3.range(20);
svg.selectAll(null)
  .data(data)
  .enter()
  .append("rect")
  .attr("x", d => d * 30)
  .attr("width", 30)
  .attr("height", 10)
  .attr("y", d => scale(d))

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