JavaScript/D3使用函数传入字符串标识数据集子元素的问题求解

解决方法 #

这是JavaScript对象属性访问的固定语法规则导致的问题：

• 使用.点运算符访问对象属性时，后方的名称会被作为固定属性名字面量解析，不会读取同名变量的存储值，因此loadedData[i].x永远只会尝试读取键名为"x"的属性，自然返回undefined。
• 如果要通过变量存储的字符串动态访问属性，需要使用[]方括号语法，方括号内部会自动解析变量的值作为属性名。

你只需要将代码对应部分修改为以下写法即可，同时注意同一个块级作用域内不能用let重复声明同一个变量：

function charter(data,type,x,y){
    d3.csv(filename).then(function(loadedData){
        for (let i = 0 ; i < loadedData.length; i++){
            // 方括号语法会读取x变量存储的字符串作为属性名
            let x_axis = loadedData[i][x]; 
            // y轴取值同理
            let y_axis = loadedData[i][y];
            // 后续图表构建逻辑
        }
    })
}

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