使用C3.js生成环形图时出现translate(NaN,0)错误求助

你遇到的Error: <g> attribute transform: Expected number, "translate(NaN, 0)"错误，核心原因是不必要的x轴配置与数据类型不匹配。

问题根源 #

你的CSV里index列的值是字符串ATTEMPTS，但你在C3配置里设置了x:"index"——对于环形图（donut）来说，这个配置完全多余，而且C3会尝试把这个字符串当作数值型x轴数据解析，直接得到NaN，进而引发布局转换时的错误。

修复方案 #

直接移除data配置里的x:"index"即可，修改后的代码如下：

var Attempts = c3.generate({
    bindto: '#attempts',
    data: {
        url: 'attempts.csv',
        type: 'donut',
        onclick: function (d, i) { console.log("onclick", d, i); },
        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
    },
    donut: {
        label: {
            format: function (value) { return value; }
        }
    }
});

原理说明 #

你的CSV结构非常适合环形图：

• 第一行的列名（Basic Mechanics、Basic Thermodynamics等）会被C3自动识别为环形图的各个分类项
• 第二行的数值对应每个分类项的取值
• 第一列的index只是用来标识这一行数据的名称，完全不需要绑定为x轴——环形图本身不需要x轴维度，它是基于分类项的数值占比来渲染的。

修改后，图表就能正常渲染，每个环形分段会对应CSV里的课程名称，显示你设置的对应数值。

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