d3js画网格

admin
行业动态
2025-04-12
4425

D3.js可通过SVG绘制自定义网格，用于可视化图表背景，使用d3-scale生成刻度，创建水平/垂直线段数组，利用data()绑定数据，append(“path”)或循环添加元素，设置stroke样式，结合比例尺动态调整间距，支持虚线、颜色、透明度等属性定制，适合构建坐标系辅助线或数据点对齐参照。

在数据可视化中，网格（Grid）常被用作图表的背景或辅助线，帮助用户更直观地理解数据的分布规律，D3.js 作为一款强大的数据可视化库，可以通过灵活的 API 实现自定义网格的绘制，以下将详细介绍如何使用 D3.js 绘制基础网格、动态网格以及与数据结合的实用案例。

基础网格绘制

搭建 HTML 结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <div id="container"></div>
</body>
</html>

初始化 SVG 容器

const width = 800, height = 600;
const svg = d3.select("#container")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

绘制水平网格线

// 创建比例尺（假设数据范围为 0-100）
const yScale = d3.scaleLinear()
  .domain([0, 100])
  .range([height, 0]);
// 生成水平线
svg.selectAll("line.horizontal")
  .data(yScale.ticks(10)) // 生成 10 条刻度线
  .enter()
  .append("line")
  .attr("class", "horizontal")
  .attr("x1", 0)
  .attr("x2", width)
  .attr("y1", d => yScale(d))
  .attr("y2", d => yScale(d));

绘制垂直网格线

const xScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, width]);
svg.selectAll("line.vertical")
  .data(xScale.ticks(10))
  .enter()
  .append("line")
  .attr("class", "vertical")
  .attr("y1", 0)
  .attr("y2", height)
  .attr("x1", d => xScale(d))
  .attr("x2", d => xScale(d));

添加样式与交互

CSS 美化网格

line.horizontal {
  stroke: #eee;
  stroke-width: 1;
  stroke-dasharray: 2,2; /* 虚线效果 */
}
line.vertical {
  stroke: #eee;
  stroke-width: 1;
}

动态调整网格密度

通过修改比例尺的ticks() 参数,可以控制网格线的数量：

d3js画网格第1张

// 生成更密集的网格
yScale.ticks(20); // 20 条水平线
xScale.ticks(20); // 20 条垂直线

响应式网格

监听窗口大小变化,动态更新网格：

window.addEventListener("resize", () => {
  const newWidth = document.getElementById("container").clientWidth;
  xScale.range([0, newWidth]);
  svg.attr("width", newWidth);
  // 重新绘制网格线（需先清除旧线条）
  svg.selectAll("line").remove();
  drawGrid(); // 封装绘制逻辑到函数中
});

结合数据可视化

案例：柱状图背景网格

// 数据示例
const data = [30, 70, 45, 90, 25];
// 绘制柱状图
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d, i) => i * (width / data.length))
  .attr("y", d => yScale(d))
  .attr("width", width / data.length - 5)
  .attr("height", d => height - yScale(d))
  .attr("fill", "steelblue");
// 使用相同的比例尺绘制网格（确保对齐数据点）