写一个d3力导向图的代码
时间: 2023-10-30 10:08:46 浏览: 39
以下是一个简单的d3力导向图的代码示例,包含了节点、边和节点拖动等功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>力导向图</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<svg width="600" height="600"></svg>
<script>
// 创建节点和边的数据
var nodes = [{id: 'A'}, {id: 'B'}, {id: 'C'}, {id: 'D'}, {id: 'E'}];
var links = [{source: 'A', target: 'B'}, {source: 'B', target: 'C'}, {source: 'C', target: 'D'}, {source: 'D', target: 'E'}, {source: 'E', target: 'A'}];
// 创建力导向图模拟器
var simulation = d3.forceSimulation(nodes)
.force('link', d3.forceLink(links).id(function(d) { return d.id; }))
.force('charge', d3.forceManyBody())
.force('center', d3.forceCenter(300, 300))
.on('tick', ticked);
// 创建节点和边的SVG元素
var svg = d3.select('svg');
var link = svg.selectAll('line')
.data(links)
.enter().append('line')
.attr('stroke', '#999')
.attr('stroke-width', '1');
var node = svg.selectAll('circle')
.data(nodes)
.enter().append('circle')
.attr('r', 10)
.attr('fill', '#ccc')
.call(d3.drag()
.on('start', dragstarted)
.on('drag', dragged)
.on('end', dragended));
// 节点拖动相关的函数
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
// 每个时间段更新节点和边的位置
function ticked() {
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>
</body>
</html>
```
在这个示例中,我们首先创建了节点和边的数据,并使用 `d3.forceSimulation()` 函数创建了力导向图模拟器。然后,我们创建了节点和边的SVG元素,并使用 `d3.drag()` 函数为节点添加了拖动事件。最后,在模拟器的每个时间段里,我们更新了节点和边的位置。如果你需要更详细的解释,请参考d3官方文档。