D3.js实现饼图,环图,玫瑰图的绘制

const data = [
    { name: "外包", value: 3000 },
    { name: "金融", value: 4754 },
    { name: "制造", value: 1120 },
    { name: "咨询", value: 4032 }
];

const pieData = d3.pie().value((d) => d.value)(data)

console.log(pieData)

const arc = d3.arc()
    .innerRadius(0)
    .outerRadius(100)
    .startAngle(0)
    .endAngle(Math.PI / 2);
arc(); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

const pieData = d3.pie()
    .value((d) => d.value)
    .sort((a, b) => a.value - b.value)(data);

const arc = d3.arc().innerRadius(0).outerRadius(100);
const color = d3.scaleOrdinal(d3.schemeCateGory10);

const arcGroup = svg.append("g")
    .attr("transfORM", "translate(300, 300)")
    .selectAll("path")
    .data(pieData);

arcGroup.join("path")
    .attr("fill", (d, i) => color(i))
    .attr("d", arc);

const arc = d3.arc().innerRadius(30).outerRadius(100);

const allCount = data.reduce((pre, cur) => pre + cur.value, 0);

const roseArc = d3.arc()
    .innerRadius(0)
    .outerRadius((d) => {
        return (d.value / allCount) * 100 + 100;
    });

const roseArc = d3.arc()
    .innerRadius(0)
    .outerRadius((d) => {
        return (d.value / allCount) * 100 + 100;
    })
    .cornerRadius(16); // 圆角