javascript - D3、传递变量的 Angular 组件

Question

我这里有一个骗子 - 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 中不起作用。

谁能看看如何解决这个问题。

Answer 1

看来我已修复它 - 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 范围内。