半圆环图和顶点图

半圆环图（Semi-Circle Ring Chart）和顶点图（Vertex Diagram）是两种不同的数据可视化图表类型，它们各自有不同的应用场景和优势。

半圆环图（Semi-Circle Ring Chart）

基础概念： 半圆环图是一种环形图的变体，它将一个完整的圆环分成两个半圆，通常用于展示两个相关数据集的比例关系。

优势：

对比清晰：通过两个半圆的对比，可以直观地看出两组数据的差异。
空间利用率高：在有限的空间内展示更多的信息。
美观简洁：视觉上较为吸引人，易于理解。

类型：

静态半圆环图：固定数据展示。
动态半圆环图：可以实时更新数据，适用于监控系统等场景。

应用场景：

市场分析：比较不同产品的市场份额。
财务报告：展示收入和支出的比例。
健康监测：显示正常指标和异常指标的比例。

示例代码（使用D3.js）：

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

// 数据
const data = [40, 60];

// 创建半圆环图
const arc = d3.arc()
    .innerRadius(50)
    .outerRadius(100)
    .startAngle(0)
    .endAngle(function(d, i) { return i === 0 ? Math.PI : 2 * Math.PI; });

svg.selectAll("path")
    .data(data)
    .enter().append("path")
    .attr("d", arc)
    .attr("transform", "translate(200,100)")
    .style("fill", function(d, i) { return i === 0 ? "blue" : "red"; });

顶点图（Vertex Diagram）

基础概念： 顶点图是一种用于展示网络拓扑结构的图表，其中节点（顶点）表示实体，边表示实体之间的关系。

优势：

直观展示关系：能够清晰地显示各个节点之间的连接关系。
易于扩展：适用于复杂网络的可视化。
支持交互：可以通过鼠标操作查看详细信息。

类型：

无向图：节点之间的边没有方向。
有向图：节点之间的边有明确的方向。

应用场景：

社交网络分析：展示用户之间的关系。
交通网络：显示城市之间的交通路线。
电路设计：表示电子元件之间的连接。

示例代码（使用D3.js）：

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

// 数据
const nodes = [
    {id: "A", x: 100, y: 200},
    {id: "B", x: 300, y: 100},
    {id: "C", x: 300, y: 300}
];

const links = [
    {source: "A", target: "B"},
    {source: "B", target: "C"},
    {source: "C", target: "A"}
];

// 创建节点
svg.selectAll(".node")
    .data(nodes)
    .enter().append("circle")
    .attr("class", "node")
    .attr("r", 10)
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    .style("fill", "blue");

// 创建边
svg.selectAll(".link")
    .data(links)
    .enter().append("line")
    .attr("class", "link")
    .attr("x1", d => nodes.find(n => n.id === d.source).x)
    .attr("y1", d => nodes.find(n => n.id === d.source).y)
    .attr("x2", d => nodes.find(n => n.id === d.target).x)
    .attr("y2", d => nodes.find(n => n.id === d.target).y)
    .style("stroke", "black")
    .style("stroke-width", 2);