2b:null 2c:["$","title",null,{"children":"Sized donut multiples | Benbinbin | Observable"}] 31:T182b,chart = { /** * * 构建比例尺 * */ // 设置颜色比例尺 const color = d3.scaleOrdinal() .domain(data.columns.slice(1)) .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); /** * * 对数据进行转换 * */ // 使用 d3.pie() 创建一个 pie 饼图角度生成器 // 饼图角度生成器会基于给定的数据，计算各数据项所对应的扇形在饼图中所占的角度 const pie = d3.pie() .sort(null) .padAngle(0.02) .value((d) => d.population); /** * * 创建图例 * ⚠️ 但以下代码似乎有问题，在页面并没有成功渲染显示出来 * ☝️ 在前一个 cell 使用另一种方法来创建图例 * */ // const legend = d3.select("body").append("svg") // .attr("class", "legend") // .attr("width", 120) // .attr("height", (data.columns.length - 1) * 20) // .selectAll("g") // .data(data.columns.slice(1).reverse()) // .enter().append("g") // .attr("transform", (d, i) => `translate(0,${i * 20})`); // legend.append("rect") // .attr("width", 18) // .attr("height", 18) // .style("fill", color); // legend.append("text") // .attr("x", 24) // .attr("y", 9) // .attr("dy", ".35em") // .text((d) => d); /** * * 绘制环形图 * 每个环形图都使用单独的一个

作为最外层容器，包裹一系列的