13、图可视化：从力导向图到弦图与矩阵图

最新推荐文章于 2025-11-19 08:06:22 发布

咖啡JSON

最新推荐文章于 2025-11-19 08:06:22 发布

阅读量11

点赞数

CC 4.0 BY-SA版权

分类专栏： D3.js数据可视化实战文章标签： D3.js 力导向图弦图

本文链接：https://blog.youkuaiyun.com/i1j2k/article/details/155013939

D3.js数据可视化实战专栏收录该内容

23 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

图可视化：从力导向图到弦图与矩阵图

在数据可视化领域，图的可视化是一种强大的工具，它能够直观地展示数据之间的关系。本文将详细介绍如何使用 D3.js 创建不同类型的图可视化，包括力导向图、弦图和矩阵图，并为这些可视化添加交互功能。

1. 力导向图可视化

1.1 添加节点并运行模拟

添加节点的过程遵循常见的可视化原则。以下是相关代码：

var color = d3.scaleOrdinal().domain(Object.keys(groups))
   .range(d3.schemeCategory20);
var node = svg.append("g")
    .attr("class", "nodes")
    .attr("transform", "translate(0 -60)")
    .selectAll("circle")
    .data(mostUsed)
    .enter().append("g")
node.append("circle")
    .attr("r", function(d) {return scaleRadius(d.count)})
    .attr("fill", function(d) { return color(d.character); })
    .attr("stroke", function(d) { return d3.rgb(color(d.character)).darker(0.2); });

在这段代码中，我们创建了 g 元素，