D3 Version 7 热力图创建语法及与旧版本差异咨询

具体实现语法 #

热力图在v7版本中核心通过scaleBand分类轴比例尺+矩形元素拼接+颜色映射实现，以下是最小实现代码：

// 1. 定义热力图数据，结构为包含x分类、y分类、数值的扁平数组
const heatmapData = [
  {x: "周一", y: "00:00", value: 13},
  {x: "周一", y: "04:00", value: 6},
  {x: "周一", y: "08:00", value: 27},
  {x: "周一", y: "12:00", value: 35},
  {x: "周二", y: "00:00", value: 10},
  {x: "周二", y: "04:00", value: 4},
  {x: "周二", y: "08:00", value: 31},
  {x: "周二", y: "12:00", value: 42}
  // 其余数据按相同格式补充
]

// 2. 初始化画布
const margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = 500 - margin.left - margin.right,
      height = 300 - margin.top - margin.bottom;

const svg = d3.select("#heatmap-container")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", `translate(${margin.left}, ${margin.top})`);

// 3. 定义三类比例尺
const xScale = d3.scaleBand()
  .domain([...new Set(heatmapData.map(d => d.x))])
  .range([0, width])
  .padding(0.05);

const yScale = d3.scaleBand()
  .domain([...new Set(heatmapData.map(d => d.y))])
  .range([0, height])
  .padding(0.05);

const colorScale = d3.scaleSequential()
  .interpolator(d3.interpolateBlues)
  .domain([0, d3.max(heatmapData, d => d.value)]);

// 4. 绘制热力图色块
svg.selectAll("rect.heat-cell")
  .data(heatmapData)
  .join("rect")
  .attr("class", "heat-cell")
  .attr("x", d => xScale(d.x))
  .attr("y", d => yScale(d.y))
  .attr("width", xScale.bandwidth())
  .attr("height", yScale.bandwidth())
  .style("fill", d => colorScale(d.value))
  .style("stroke", "#fff");

// 5. 绘制坐标轴
svg.append("g")
  .attr("transform", `translate(0, ${height})`)
  .call(d3.axisBottom(xScale));

svg.append("g")
  .call(d3.axisLeft(yScale));

交互扩展（可选） #

如果需要添加hover提示，事件绑定写法如下：

d3.selectAll(".heat-cell")
  .on("mouseover", (event, d) => {
    // 这里编写自定义悬浮提示逻辑，event为原生事件对象，d为当前色块对应数据
    console.log(`数值：${d.value}`)
  })

与旧版本（v6及更早）的核心差异 #

• 元素更新逻辑简化：v6及更早版本处理数据更新需要手动编写enter().append()、merge()、exit().remove()三段式逻辑，v7封装为join()方法，默认自动处理新增、更新、移除三类元素，代码量减少40%左右。
• 事件回调参数调整：旧版本事件回调第一个参数为绑定的数据，v7中第一个参数为事件对象，数据调整为第二个参数，需要注意写法适配。
• 废弃API完全移除：旧版本兼容的非驼峰命名比例尺（如d3.scale.ordinal、d3.scale.linear）在v7中被完全移除，仅保留d3.scaleBand、d3.scaleLinear等驼峰命名的构造函数。
• 颜色插值API规范统一：部分旧版本的颜色插值别名被移除，统一使用d3.interpolate[色系名]的命名规则，参数传递顺序也做了全局统一，避免了旧版本不同插值函数参数顺序不一致的问题。

内容的提问来源于stack exchange，提问作者user17178722