Javascript 如何计算d3.js热图的矩形大小

我正在尝试使用d3创建热图。我已经创建了轴和比例，但我仍然停留在如何绘制矩形上。我使用内置的比例函数从矩形中获取x和y点，例如

attr('x', d => {
    return timeScale(d.hour);
  })
  .attr('y', d => {
    return dayScale(d.day);
  })

但问题在于计算每个矩形的宽度和高度。我不知道怎么计算。到目前为止，我正在使用

 .attr('width', gridSize)
 .attr('height', gridSize)

设置高度和宽度，但无法正常工作。我知道另一种方法是：

  .attr('x', d => (((d.hour - 1) * gridSize) + padding))
  .attr('y', d => (((d.day - 1) * gridSize) + padding))
  .attr('class', 'hour bordered')
  .attr('width', gridSize)
  .attr('height', gridSize)
  .style('fill', colors[0])

但我想避免这种情况

你可以找到迄今为止我编写/复制的代码

如果使用d3.scaleBand（），则可以在标尺本身内设置填充，然后访问标尺宽度和高度的scale.bandwidth

由于量表是“有序”量表，您需要提供域中的每个类别（如天数）

有关示例，请参见链接：

守则的有关部分包括：

var dayScale = d3.scaleBand()
  .domain(d3.range(7,0,-1))
  .range([height, 0])
  .padding(0.4);

var dayAxis = d3.axisLeft().ticks(7).scale(dayScale)
svg.append('g').attr('class', 'xAxis').call(dayAxis)

var timeScale = d3.scaleBand()
  .domain(d3.range(1,25,1))
  .range([0, width])
  .padding(0.1)

var timeAxis = d3.axisTop().scale(timeScale).ticks(24)
svg.append('g').attr('class', 'yAxis').call(timeAxis)

svg.selectAll('.squares')
  .data(dataset)
  .enter()
  .append('rect')
  .attr('x', d => {
    return timeScale(d.hour);
  })
  .attr('y', d => {
    return dayScale(d.day);
  })
  .attr('width', timeScale.bandwidth())
  .attr('height', dayScale.bandwidth())
  .style('fill', d => colorScale(d.value))

---

您可以尝试使用axes

tickSize（）

属性来定义平铺的宽度/高度。我将使用d3.scaleBand，它将为矩形的宽度和高度提供scale.bandwidth（），并提供填充。例如@TomShanley perfect！！这正是我想要的。谢谢。你能把这个作为答案吗？@RyanMorton我试过使用

tickSize（）

，但看起来不太好。

var dayScale = d3.scaleBand()
  .domain(d3.range(7,0,-1))
  .range([height, 0])
  .padding(0.4);

var dayAxis = d3.axisLeft().ticks(7).scale(dayScale)
svg.append('g').attr('class', 'xAxis').call(dayAxis)

var timeScale = d3.scaleBand()
  .domain(d3.range(1,25,1))
  .range([0, width])
  .padding(0.1)

var timeAxis = d3.axisTop().scale(timeScale).ticks(24)
svg.append('g').attr('class', 'yAxis').call(timeAxis)

svg.selectAll('.squares')
  .data(dataset)
  .enter()
  .append('rect')
  .attr('x', d => {
    return timeScale(d.hour);
  })
  .attr('y', d => {
    return dayScale(d.day);
  })
  .attr('width', timeScale.bandwidth())
  .attr('height', dayScale.bandwidth())
  .style('fill', d => colorScale(d.value))