如何在next.js应用中嵌入静态D3图表（无需额外安装包）

步骤1：提取静态D3图表代码 #

从你提供的示例图表中，拆分出三类核心代码：

• HTML容器：用来承载图表的DOM元素，比如<div id="chart"></div>
• CSS样式：控制图表外观的样式规则，比如节点、连线的颜色和尺寸
• D3脚本：实现图表绘制的JS逻辑，包括数据处理、力导向图配置等

步骤2：编写Next.js图表组件 #

新建一个组件（比如D3Chart.jsx），通过dangerouslySetInnerHTML把整合后的静态代码插入到组件中。注意将CSS放入<style>标签，脚本放入<script>标签，同时确保D3依赖可访问。

示例组件代码 #

import React from 'react';

const D3Chart = () => {
  // 整合静态D3图表的完整HTML内容
  const chartContent = `
    <div style="width: 800px; height: 600px;">
      <style>
        .node {
          stroke: #fff;
          stroke-width: 1.5px;
        }
        .link {
          stroke: #999;
          stroke-opacity: .6;
        }
      </style>
      <div id="chart"></div>
      <script src="https://d3js.org/d3.v3.min.js"></script>
      <script>
        var width = 800,
            height = 600;

        var color = d3.scale.category20();

        var force = d3.layout.force()
            .charge(-120)
            .linkDistance(30)
            .size([width, height]);

        var svg = d3.select("#chart").append("svg")
            .attr("width", width)
            .attr("height", height);

        d3.json("https://raw.githubusercontent.com/mbostock/4061961/master/miserables.json", function(error, graph) {
          if (error) throw error;

          force
              .nodes(graph.nodes)
              .links(graph.links)
              .start();

          var link = svg.selectAll(".link")
              .data(graph.links)
            .enter().append("line")
              .attr("class", "link")
              .style("stroke-width", function(d) { return Math.sqrt(d.value); });

          var node = svg.selectAll(".node")
              .data(graph.nodes)
            .enter().append("circle")
              .attr("class", "node")
              .attr("r", 5)
              .style("fill", function(d) { return color(d.group); })
              .call(force.drag);

          node.append("title")
              .text(function(d) { return d.name; });

          force.on("tick", function() {
            link.attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });

            node.attr("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; });
          });
        });
      </script>
    </div>
  `;

  return <div dangerouslySetInnerHTML={{ __html: chartContent }} />;
};

export default D3Chart;

步骤3：规避服务端渲染报错 #

由于D3依赖DOM环境，直接在服务端渲染会报错，可通过Next.js的dynamic导入禁用组件的服务端渲染：

// 在页面组件中导入图表组件
import dynamic from 'next/dynamic';

const D3Chart = dynamic(() => import('../components/D3Chart'), {
  ssr: false,
  loading: () => <p>加载图表中...</p>
});

export default function Home() {
  return (
    <div>
      <h1>嵌入的D3力导向图</h1>
      <D3Chart />
    </div>
  );
}

关键注意事项 #

• 安全风险：dangerouslySetInnerHTML会直接插入HTML内容，必须确保代码来源可信，避免XSS攻击。
• D3依赖：示例使用CDN引入D3，你也可以本地安装（npm install d3），但需注意在客户端环境中导入使用。
• 数据加载：示例加载外部JSON数据，若数据需本地化，可将文件放入public目录后修改加载路径。

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