如何在最新版D3中添加SVG图案？解决append空指针报错

错误原因分析 #

你遇到的Uncaught TypeError有两个核心原因：

1. 找不到目标DOM元素：d3.select("#hook")返回了null，说明页面中不存在id为hook的元素，导致后续无法调用append方法。
2. 新版D3不支持对象式传参：从D3 v4开始，.attr({...})这种一次性传入多个属性的写法被移除，必须改为逐个设置属性。

修正步骤与代码 #

第一步：确保页面存在目标容器 #

在HTML中添加一个id为hook的元素，比如：

<div id="hook"></div>

第二步：修正D3代码 #

以下是适配最新版D3的完整代码：

// 创建SVG容器
const svg = d3.select("#hook")
  .append("svg")
  .attr("id", "d3svg")
  .attr("width", 120)
  .attr("height", 120);

// 定义图案
const defs = svg.append("defs");
const pattern = defs.append("pattern")
  .attr("id", "hash4_4")
  .attr("width", "8")
  .attr("height", "8")
  .attr("patternUnits", "userSpaceOnUse")
  .attr("patternTransform", "rotate(-45)");

// 向图案中添加矩形
pattern.append("rect")
  .attr("width", "4")
  .attr("height", "8")
  .attr("transform", "translate(0,0)")
  .attr("fill", "#88AAEE");

// 创建使用图案的圆形
svg.append("g")
  .attr("id", "shape")
  .append("circle")
  .attr("cx", "60")
  .attr("cy", "60")
  .attr("r", "50")
  .attr("fill", "url(#hash4_4)");

关键修改点 #

• 把所有.attr({...})拆分为多个.attr("属性名", "属性值")的链式调用，这是新版D3的标准写法。
• 确保页面中存在#hook元素，否则D3无法挂载SVG容器。
• 拆分了图案创建的链式调用，让代码更清晰，同时避免原代码中pattern变量指向<rect>而非<pattern>元素的潜在问题。

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