D3.js 绘制拓扑图

要使用D3.js绘制拓扑图，可以按以下步骤进行操作：

1. 定义数据结构：拓扑图通常由节点和边组成，需要定义节点和边的数据结构。

2. 创建SVG容器：使用D3.js创建SVG容器，设置宽度和高度。

3. 绘制节点：使用D3.js绘制节点，可以根据节点的属性设置节点的大小、形状、颜色等。

4. 绘制边：使用D3.js绘制边，可以根据边的属性设置边的粗细、颜色等。

5. 添加交互：可以为节点和边添加交互效果，例如鼠标悬停、点击等。

以下是一个简单的示例代码：

// 定义数据结构
var nodes = [{id: 1, name: 'Node 1'}, {id: 2, name: 'Node 2'}, {id: 3, name: 'Node 3'}];
var links = [{source: 1, target: 2}, {source: 2, target: 3}, {source: 3, target: 1}];

// 创建SVG容器
var svg = d3.select('body').append('svg')
    .attr('width', 400)
    .attr('height', 400);

// 绘制节点
var node = svg.selectAll('.node')
    .data(nodes)
    .enter().append('circle')
    .attr('class', 'node')
    .attr('r', 20)
    .attr('cx', function(d) { return Math.random() * 400; })
    .attr('cy', function(d) { return Math.random() * 400; })
    .style('fill', 'blue');

// 绘制边
var link = svg.selectAll('.link')
    .data(links)
    .enter().append('line')
    .attr('class', 'link')
    .attr('x1', function(d) { return node.filter(function(n) { return n.id === d.source; }).attr('cx'); })
    .attr('y1', function(d) { return node.filter(function(n) { return n.id === d.source; }).attr('cy'); })
    .attr('x2', function(d) { return node.filter(function(n) { return n.id === d.target; }).attr('cx'); })
    .attr('y2', function(d) { return node.filter(function(n) { return n.id === d.target; }).attr('cy'); })
    .style('stroke', 'black')
    .style('stroke-width', 2);

// 添加交互
node.on('mouseover', function() {
    d3.select(this).style('fill', 'red');
}).on('mouseout', function() {
    d3.select(this).style('fill', 'blue');
});

这段代码创建了一个包含3个节点和3条边的拓扑图，节点和边的位置是随机生成的。运行代码后，可以看到一个简单的拓扑图，并且当鼠标悬停在节点上时，节点的颜色会变为红色。