我这里有一个代码笔 - 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 缩放函数。
最佳答案
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 示例中修改它时,它就起作用了。
关于javascript - D3 - 将变量传递到 x 刻度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48736188/