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

Question

我这里有一个代码笔 - https://codepen.io/anon/pen/yvgJKB

我有一个简单的堆积条形图。

我想将其制作成一个组件，因此我需要传入值以使其可重用

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 缩放函数。

Answer 1

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);

当我在您的 codepen 示例中修改它时，它就起作用了。