D3.js环形图函数仅首次调用正常，后续调用失效问题求助

我帮你梳理下代码里的几个关键问题，这些就是导致后续调用图表异常的核心原因：

核心问题分析 #

1. 参数顺序完全不匹配 #

你的函数定义是 donutChart(id, data, color)，但调用时却传的是 donutChart(数据值, 颜色) —— 这就导致第一个参数id拿到的是数据（比如0.8这类数值），d3.select(id)根本找不到对应的DOM容器，新创建的SVG可能被错误追加到页面其他位置，后续的元素选择自然全乱了。

2. 全局选择器导致元素追加到旧图表 #

你用了 d3.select('svg g') 来选择分组元素，这个选择器会全局匹配页面上第一个<svg>里的<g>，所以后续调用时，所有新的路径元素都会被追加到第一次创建的图表里，新SVG自然是空的。

3. 无效的元素选择器与冗余代码 #

• selectAll('arc') 里的arc不是合法的HTML/SVG标签，应该用类选择器或者空选择（比如selectAll(null)）来绑定数据。
• 代码里有未使用的冗余变量var red，虽然不报错但影响可读性。
• 嵌套的立即执行函数(IIFE)在这里完全没必要，反而把逻辑搞复杂了。

修正后的完整代码 #

function donutChart(containerId, data, color) {
    // 配置参数
    const width = 400;
    const height = 400;
    const radius = 200;
    const greyColor = '#e8e8e8';
    const dataColor = color || '#1dafd3'; // 用传入的color作为数据色，默认值兜底

    // 构造饼图数据：目标数据 + 剩余部分
    const pieData = [
        { name: "target", value: data },
        { name: "remaining", value: (1 - data) }
    ];

    // 创建弧形生成器
    const arc = d3.arc()
        .innerRadius(radius - 50)
        .outerRadius(radius);

    // 创建SVG和分组元素，并且保存当前的分组引用
    const chartGroup = d3.select(containerId)
        .append('svg')
        .attr('width', width)
        .attr('height', height)
        .append('g')
        .attr('transform', `translate(${width / 2}, ${height / 2})`); // 修正居中逻辑，让图表真正居中

    // 创建饼图布局
    const pie = d3.pie()
        .sort(null)
        .value(d => d.value);

    // 绑定数据并生成切片
    const arcGroups = chartGroup.selectAll('.slice')
        .data(pie(pieData))
        .enter()
        .append('g')
        .attr('class', 'slice');

    // 绘制路径
    arcGroups.append('path')
        .attr("d", arc)
        .attr('fill', (d, i) => i === 0 ? dataColor : greyColor); // 直接根据索引判断颜色，更直观
}

正确的调用方式 #

首先确保页面上有对应的容器元素，比如：

<div id="danceability-chart"></div>
<div id="acousticness-chart"></div>

然后调用函数：

donutChart('#danceability-chart', songData.audio_features[0].danceability, "#1dafd3");
donutChart('#acousticness-chart', songData.audio_features[0].acousticness, "#1dafd3");

关键修改点说明 #

1. 修正参数顺序：明确第一个参数是容器的选择器（比如#chart-id），确保SVG能正确追加到目标容器里。
2. 保存当前图表分组：用chartGroup变量保存当前创建的<g>元素，后续所有元素操作都基于这个局部引用，不会再全局污染旧图表。
3. 修正居中逻辑：把translate的偏移改成width/2和height/2，让环形图真正居中在SVG里（之前的width - radius计算逻辑有误）。
4. 简化颜色逻辑：直接根据数据索引判断填充色，比用序数比例尺更直观，也避免了不必要的比例尺定义。
5. 清理冗余代码：去掉了无用的var red和嵌套的IIFE，让逻辑更清晰。

这样修改后，每次调用函数都会在目标容器里创建独立的SVG和图表元素，不会再出现元素混乱的问题啦！

内容的提问来源于stack exchange，提问作者Josh Leibsohn