Wix iframe嵌入D3力导向图失败，是否完全不兼容？

嘿，我之前也在Wix上折腾过嵌入D3可视化，你的情况我太懂了！首先明确说：D3完全可以在Wix的iframe里运行，你遇到的空iframe问题不是D3的锅，是那个官方示例链接的限制。

为什么bl.ocks.org的示例显示为空？ #

像bl.ocks.org这类网站，为了安全和版权，通常会设置X-Frame-Options或者Content-Security-Policy响应头，直接禁止自己的页面被其他网站的iframe嵌入。不管你怎么调sandbox属性，只要源站不让嵌，Wix的iframe就加载不出来内容。

怎么在Wix里成功嵌入自己的D3力导向图？ #

按这几步来，肯定能成：

• 第一步：打包你的D3代码成完整HTML文件
  写一个独立的HTML页面，包含D3的CDN引入（比如<script src="https://d3js.org/d3.v7.min.js"></script>）、你的力导向图脚本，还有必要的样式（比如给SVG设置宽高）。举个极简测试例子：

  <!DOCTYPE html>
  <html>
  <head>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>svg { width: 100%; height: 500px; }</style>
  </head>
  <body>
    <svg></svg>
    <script>
      // 简单的D3测试代码：画个力导向图框架
      const svg = d3.select("svg");
      const width = +svg.attr("width");
      const height = +svg.attr("height");
  
      const nodes = d3.range(5).map(d => ({id: d}));
      const links = [{source: 0, target: 1}, {source: 1, target: 2}, {source: 2, target: 3}, {source: 3, target: 4}];
  
      const simulation = d3.forceSimulation(nodes)
        .force("link", d3.forceLink(links).id(d => d.id))
        .force("charge", d3.forceManyBody())
        .force("center", d3.forceCenter(width / 2, height / 2));
  
      const link = svg.append("g")
        .selectAll("line")
        .data(links)
        .join("line")
        .attr("stroke", "#999")
        .attr("stroke-width", 1);
  
      const node = svg.append("g")
        .selectAll("circle")
        .data(nodes)
        .join("circle")
        .attr("r", 5)
        .attr("fill", "#69b3a2");
  
      simulation.on("tick", () => {
        link
          .attr("x1", d => d.source.x)
          .attr("y1", d => d.source.y)
          .attr("x2", d => d.target.x)
          .attr("y2", d => d.target.y);
  
        node
          .attr("cx", d => d.x)
          .attr("cy", d => d.y);
      });
    </script>
  </body>
  </html>
  

• 第二步：托管你的HTML文件
  把这个文件传到支持iframe嵌入的静态托管平台，比如GitHub Pages（记得仓库设置里开启Pages，且不要设置X-Frame限制）、Netlify这类平台。确保你能直接在浏览器里打开这个URL看到D3图表。
• 第三步：在Wix里配置iframe
  在Wix编辑器中添加HTML iframe组件，然后把你的托管URL填进去，sandbox属性保留必要的权限就行，比如：

  <iframe sandbox="allow-scripts" src="你的托管URL" marginwidth="0" marginheight="0" style="height:600px;" scrolling="no"></iframe>
  

  这里allow-scripts是必须的（要运行D3脚本），如果你的图表不需要弹窗、表单或者同域资源，其他权限可以去掉，减少安全风险。

验证小技巧 #

先拿上面的极简测试代码托管后嵌入Wix，确认能显示再替换成你自己的技能兴趣网络图，这样能快速排查是不是代码本身的问题。

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