半圆环图和顶点图

// 创建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"; });

// 创建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);