我这里有一个骗子 - https://plnkr.co/edit/yGugULSedKD3EV073YP4?p=preview
这个问题是我的问题的后续问题 - D3 - Passing variable to x scale
我正在尝试在 Angular 中创建一个堆叠条形图组件
为了使其可重用,我需要将变量传递给组件。
我需要将变量传递给 xscale 函数和条形图的 x 属性
在 plunker 中,我传递了字符串“date”
这在栏的 x 属性中起作用
private xAxisData = 'date'
.attr("x", (d) => {
let xAxisData = d.data[this.xAxisData];
return this.x(xAxisData)
//instead of
//return x(d.data.date)
})
它在 xscale 函数中不起作用。
private xAxisData = 'date'
this.x = d3.scaleBand()
.domain(this.data.map((d) => {
//This doesn't work
//return d[xAxisValue];
return d.date;
}))
.range([0, this.width])
.padding(0.1);
我链接的上一个问题是,在 x 比例中传递变量可以工作,但在 Angular 中不起作用。
谁能看看如何解决这个问题。
最佳答案
看来我已修复它 - https://plnkr.co/edit/qeXnuTjTrQwl89Y38840?p=info
先保存组件实例。
let self=this;
然后在 xscale 域的 lambda 中使用它。
this.x = d3.scaleBand()
.domain(this.data.map((d) => {
return d[self.xAxisData];
//return d.date;
}))
.range([0, this.width])
.padding(0.1);
它是关于变量范围的。在早期的代码中,“xAxisData”不存在于 xscale 域的 lambda 范围内。
关于javascript - D3、传递变量的 Angular 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48737771/