SwiftUI 中的桑基图,由 D3 驱动。
制作像这样美观的图表
代码就像这样简单
import Sankey
import SwiftUI
struct QuickStartView: View {
let data = SankeyData(
nodes: [
SankeyNode("A", color: .blue),
SankeyNode("B", color: .purple),
SankeyNode("X", color: .red),
SankeyNode("Y", color: .yellow),
SankeyNode("Z", color: .green),
],
links: [
SankeyLink(5, from: "A", to: "X"),
SankeyLink(7, from: "A", to: "Y"),
SankeyLink(6, from: "A", to: "Z"),
SankeyLink(2, from: "B", to: "X"),
SankeyLink(9, from: "B", to: "Y"),
SankeyLink(4, from: "B", to: "Z"),
]
)
var body: some View {
SankeyDiagram(data)
.nodeOpacity(0.9)
.linkColorMode(.gradient)
.padding(10)
.frame(height: 350)
}
}
#Preview {
QuickstartView()
}
使用 Swift Package Manager 将 Sankey
添加到你的项目中
https://github.com/maxhumber/Sankey
使用简单的修饰符自定义 SankeyDiagram
struct UsageExampleView: View {
let data = SankeyData(
nodes: [
SankeyNode("Design", color: .blue),
SankeyNode("Development", color: .green),
SankeyNode("Testing", color: .orange),
SankeyNode("Frontend", color: .purple),
SankeyNode("Backend", color: .red),
SankeyNode("Mobile", label: "iOS"),
SankeyNode("Production", label: "Prod", color: .mint)
],
links: [
SankeyLink(30, from: "Design", to: "Frontend", color: .blue),
SankeyLink(20, from: "Design", to: "Mobile", color: .blue),
SankeyLink(40, from: "Development", to: "Frontend", color: .green),
SankeyLink(60, from: "Development", to: "Backend", color: .green),
SankeyLink(30, from: "Development", to: "Mobile", color: .green),
SankeyLink(25, from: "Testing", to: "Frontend", color: .orange),
SankeyLink(35, from: "Testing", to: "Backend"),
SankeyLink(15, from: "Testing", to: "Mobile"),
SankeyLink(95, from: "Frontend", to: "Production", color: .purple),
SankeyLink(95, from: "Backend", to: "Production", color: .red),
SankeyLink(65, from: "Mobile", to: "Production", color: .yellow)
]
)
var body: some View {
SankeyDiagram(data)
// Node modifiers
.nodeAlignment(.justify)
.nodeWidth(15)
.nodePadding(20)
.nodeDefaultColor(.gray)
.nodeOpacity(0.8)
// Link modifiers
.linkDefaultColor(.gray)
.linkOpacity(0.7)
.linkColorMode(nil)
// Label modifiers
.labelPadding(8)
.labelColor(.primary)
.labelOpacity(0.9)
.labelFontSize(14)
.labelFontFamily("Times")
// Normal view modifiers
.padding(10)
.frame(height: 400)
}
}
#Preview {
UsageExampleView()
.preferredColorScheme(.dark)
}
在 示例 App 中找到更多示例。
注意:
2.0
+ 版本使用 D3 进行渲染。对于需要之前 Google Charts 实现的项目,请通过 SPM 使用1.0
/1.0.1
版本。
2.0
+ 版本的主要区别
有关旧版实现详情,请参阅 v1.0.1 文档。