Question

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

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

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

x scale函数返回d.date

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

我想从变量

传递'date'部分

我可以为吧台的x attr做这个。

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示例中修改它时，它会起作用。

D3 - 将变量传递给x刻度

1 个答案: