运行D3.js旭日图示例代码无显示，求排查方法

1. 先理清Observable与本地浏览器环境的核心差异 #

Observable的单元格会自动返回值并完成渲染，但本地浏览器中仅调用svg.node()不会自动将元素添加到页面DOM中——你必须手动把生成的SVG节点挂载到页面的某个容器里，这是最可能导致无内容的原因。

2. 检查DOM挂载逻辑 #

• 首先在本地HTML文件中添加一个用来承载SVG的容器：

  <div id="sunburst-container"></div>
  

• 然后修改JS代码，把生成的SVG节点挂载到这个容器上，替换原来的svg.node();为：

  document.getElementById('sunburst-container').appendChild(svg.node());
  

  或者更贴合D3的写法，一开始就把SVG绑定到容器上：

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

3. 验证D3及依赖是否正确加载 #

• 确认HTML里已正确引入D3，比如用CDN：

  <script src="https://d3js.org/d3.v7.min.js"></script>
  

  注意要和Observable示例使用的D3版本一致，版本不兼容可能导致无输出。
• 打开浏览器控制台输入d3，如果能输出D3的对象说明加载成功；如果提示d3 is not defined，就是引入路径有问题。

4. 分步调试代码，验证每一步逻辑 #

• 检查数据加载：如果示例用到外部数据（比如JSON），要确保数据文件放在本地服务器目录下，打开浏览器Network面板查看是否有404错误；也可以在数据加载后加console.log(data)，确认数据是否正常读取。
• 验证布局与比例尺：调用d3.partition()等布局函数后，打印生成的层级数据，确认结构是否符合预期。
• 检查SVG是否生成：在代码中添加console.log(svg.node())，如果能看到SVG的DOM对象，说明元素已生成只是没挂载；如果返回null，说明前面的SVG创建逻辑有问题。

5. 补全Observable隐式定义的变量 #

Observable中很多全局变量（比如width、height）可能是从其他单元格继承的，本地环境需要手动定义：

const width = 800;
const height = 600;

如果这些变量未定义会变成undefined，导致SVG尺寸为0，自然看不到内容。

6. 检查CSS样式问题 #

有时候SVG元素已生成，但样式问题导致不可见：

• 打开浏览器Elements面板，找到SVG元素，查看它的尺寸、位置、填充/描边颜色是否正常。
• 比如旭日图的扇形可能没设置fill，或者opacity被设为0，可在Elements面板手动修改样式，测试是否能显示。

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