Question

我这里有一个傻瓜 - https://plnkr.co/edit/yGugULSedKD3EV073YP4?p=preview

这个问题来自我的问题 - D3 - Passing variable to x scale

我正在尝试在Angular中创建堆积条形图组件

为了使它成为可重用的，我需要将变量传递给组件。

我需要将变量传递给xscale函数和条形码的x attr

在我的传球中，我正在传递字符串'date'

这项工作在酒吧的x attr

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;

然后在lambda中使用它作为xscale域。

  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范围内。

D3，Angular组件传入变量

1 个答案: