D3.js（深度版）

高度定制的网页可视化底层，自由度最高

一、一句话定位

高度定制的网页可视化底层，自由度最高

二、为什么是它：设计哲学与底层逻辑

D3.js 是高度定制的网页可视化底层：用 data-join 把数据绑定到 DOM，enter/update/exit 精确控制元素生命周期，动画精细、自由度最高。哲学是"数据驱动 DOM"，你能做任何可视化。代价是学习曲线最陡（要扎实前端）、开发慢、不适合赶比赛/常规论文配图。仅在有前端资源、追求极致表达时考虑——它是"自由度天花板"，也是"时间成本天花板"。## 三、渲染管线与可复现性推导
数据连接（join）模型：

$\text{selectAll}(sel).\text{data}(D).\text{enter}()\to\text{append};\quad \text{exit}()\to\text{remove}$

把数据集 $D$ 与元素集合按 key 绑定，diff 出增删改三态。这种细粒度控制带来最高表达自由，但每个图都从零构造，开发成本正比于复杂度，不适合限时比赛——这是与 ECharts（高层封装）的根本取舍。## 四、适用场景

要完全自定义、独特的视觉表达
做信息图、数据新闻级作品
有前端能力、追求极致

五、优点

✅ 几乎能做任意可视化
✅ 数据驱动 DOM，动画精细
✅ 社区有大量惊艳案例

六、缺点

⚠️ 学习曲线最陡，要扎实前端功力
⚠️ 开发慢，不适合赶比赛
⚠️ 不适合常规论文配图

七、上手难度

较难

八、典型用途

定制信息图
独特交互可视化
科研之外展示

九、与谁搭配

仅在有前端资源时考虑；常规选 ECharts

十、学习资源

《D3.js 实战》
Observable 上的 D3 notebook

本篇来自《绘图软件横评（深度版）》· 数学建模学习资料站 MCM520

实战案例

D3.js 力导向网络图实战

场景：论文需展示论文引用网络，节点可拖动、边粗细表引用次数。
任务：用 D3 forceSimulation 绘制可交互引用网络。

完整代码（javascript）

const sim = d3.forceSimulation(nodes)
  .force('link', d3.forceLink(links).id(d=>d.id))
  .force('charge', d3.forceManyBody().strength(-300))
  .force('center', d3.forceCenter(w/2, h/2));

const link = svg.selectAll('line').data(links).join('line')
  .attr('stroke-width', d => Math.sqrt(d.value));
const node = svg.selectAll('circle').data(nodes).join('circle')
  .attr('r', d => 4 + d.citations/10)
  .call(d3.drag());

sim.on('tick', () => {
  link.attr('x1',d=>d.source.x).attr('x2',d=>d.target.x);
  node.attr('cx', d=>d.x).attr('cy', d=>d.y);
});

运行效果

视觉编码	含义
圆半径	被引次数（越大越核心）
边宽	引用频次
拖拽	手动调整布局
可导出静态 PNG 入论文，也可嵌网页供答辩演示。