Lab 6 · 标记

根据空间自由度，标记分为四类：

点标记（Point Mark）— 零维

示例：散点图，气泡图

视觉特点：精确位置，但多时易重叠

线标记（Line Mark）— 一维

示例：折线图、面积图

视觉特点：适合展示趋势和变化

面标记（Area Mark）— 二维

示例：直方图、热力图

视觉特点：适合比较和分布展示

体标记（Volume Mark）— 三维

示例：3D 柱状图（需要 WebGL）

在实验报告中，说明项目各图表分别使用了哪种标记及其理由。

使用 d3.line() 生成器创建折线路径：

const lineGen = d3.line()
  .x(d => xScale(d.date))
  .y(d => yScale(d.value))
  .curve(d3.curveMonotoneX); // 平滑曲线

// curve 选项：curveLinear（折线）、curveMonotoneX/Y（单调）、curveBasis（样条）、curveStep（阶梯）

svg.append('path')
  .datum(timeSeriesData)
  .attr('d', lineGen)
  .attr('fill', 'none')
  .attr('stroke', '#4472C4')
  .attr('stroke-width', 2);

d3.area() 在 d3.line() 基础上增加了下边界：

const areaGen = d3.area()
  .x(d => xScale(d.date))
  .y0(height)  // 下边界（基线）
  .y1(d => yScale(d.value)); // 上边界

svg.append('path')
  .datum(timeSeriesData)
  .attr('d', areaGen)
  .attr('fill', 'rgba(68,114,196,0.3)');

d3.arc() 用于饼图/环形图：

const pie = d3.pie().value(d => d.value);
const arcs = pie(categoryData);

const arc = d3.arc()
  .innerRadius(0)   // 0 = 饼图，>0 = 环形图
  .outerRadius(r);

svg.append('g')
  .selectAll('path').data(arcs).join('path')
  .attr('d', arc)
  .attr('fill', d => colorScale(d.data.name));

根据设计方案，在项目中实现各图表的标记：

svg.selectAll('circle')
  .data(filteredData).join('circle')
  .attr('cx', d => xScale(d.x))
  .attr('cy', d => yScale(d.y))
  .attr('r', d => rScale(d.value))
  .attr('fill', d => colorScale(d.category))
  .attr('opacity', 0.75);

将实现效果截图附在实验报告中，说明各图表使用了哪种标记。