Javascript D3-将变量传递到x刻度

我这里有一个密码笔-

我有一个简单的堆叠条形图

我想把它做成一个组件，所以我需要传入值以使其可重用

x刻度函数返回

d.date

let x = d3.scaleBand()
    .domain(dataToStack.map(function(d){
        return d.date;
    }))
    .rangeRound([0,width])
    .padding(0.05);

我想从变量中传递“日期”部分

我可以这样做的x属性的酒吧

let xAxisValue = 'date'

.attr('x', (d, i) => {
    let link = d.data[xAxisValue];                         
    return x(link)
})

我还需要将其传递到x刻度

let x = d3.scaleBand()
    .domain(dataToStack.map(function(d){
        //let link = d.[xAxisValue];                         
        //return x(link)
        return d.date;
    }))
    .rangeRound([0,width])
    .padding(0.05);

同样的方括号在这里不起作用

如何将

xAxisValue

传递给x比例函数

let xAxisValue = 'date';

在第1行中，使codepen示例正常工作

然后

let x = d3.scaleBand()
.domain(dataToStack.map(function(d){
    let link = d[xAxisValue];                         
    return link;
    //return d.date;
}))
.rangeRound([0,width])
.padding(0.05);

---

当我在你的代码笔示例中修改它时，它就可以工作。

你能编辑这篇文章并澄清你想要实现的目标吗？当前代码笔在x轴标签中显示日期，应该显示什么？问题的这一部分并不清楚：“传入x轴的a值-‘日期’，让xAxisValue=‘日期’”。我已经更新了我的问题，希望这更有意义。我认为这是一个打字错误。尝试从

let link=d.[xAxisValue]中删除

和change

xAxisValue='date'

似乎不起作用，你能更新代码笔吗？这里有一个叉子：