5、基本图表与形状：D3.js 实现动态甜甜圈图

基本图表与形状：D3.js 实现动态甜甜圈图

1. 数据加载与预处理

在使用 D3.js 构建甜甜圈图时，首先要加载和处理数据。这里使用标准的 d3.csv 方法加载 CSV 数据，并对每行数据的 row.yearsInBusinessLabel 字段进行修改。示例代码如下：

d3.csv('your_data.csv', function (row) {
    switch (row.yearsInBusiness) {
        case "319":
            row.yearsInBusinessLabel = "4 to 5 years";
            break;
        case "321":
            row.yearsInBusinessLabel = "6 to 10 years";
            break;
        case "322":
            row.yearsInBusinessLabel = "11 to 15 years";
            break;
        case "323":
            row.yearsInBusinessLabel = "more then 16 years";
            break;
    }
    return row;
}, function (data) {
    loadedData = data;
    updateCircle();
});