小编Nei*_*rty的帖子

Tldr; this当Angular绑定this到类(组件/服务)时,如何处理引用D3对象？

我希望在Angular(v.4)应用程序中使用D3.js(v.4).

我的代码可以在独立的JavaScript中运行,但我现在需要将它集成到Angular应用程序中.

使用this是让我沮丧.

我有一个SVG组,我希望拖动,所以我使用 .call(drag)

someFunction() {
    this.unitGroup = this.svg.append('g')
            .attr('id', 'unitGroup');
            .call(drag)

}

当我尝试引用被拖动的svg元素时,我的问题出现了.在我的原始代码中,我可以参考this例如let matrix = this.getCTM().使用this是在服务中使用此代码的时候,现在不工作.

drag = d3.drag()
    .on('start', () => {
        this.setClickOrigin(d3.event);
    })
    .on('drag', (d) => {
        const m = this.getCTM(); // <--- PROBLEM HERE
        const x = d3.event.x - this.clickOrigin.x;
        const y = d3.event.y - this.clickOrigin.y;
        this.setClickOrigin(d3.event);
        d3.select(this) // <--- PROBLEM HERE
            .attr('transform', `matrix(${m.a},${m.b},${m.c},${m.d},${m.e + x},${m.f + y})`);
    });

关于如何实现这一点或澄清我做错的任何指示将不胜感激.

我不认为这只是与箭头函数this …

我想知道是否有办法获得通过3dio.js插入的模型的边界框,或者计算其中心点？我希望将它们放在原点上.

下图显示了相对于红框指示的场景原点的两个模型.

太棒了；拖动 SVG 会导致其旋转和平移。

我正在尝试使用 D3 (v.4) 作为 Angular 服务的一部分在 SVG 组上实现拖动和缩放事件。

this.unitGroup = this.svg.append('g')
  .attr('id', 'unitGroup')
  .call(this.drag)
  .call(this.zoom);

拖动可平移 SVG。

drag = d3.drag()
.on('start', () => {
  console.log('drag start');
  this.setClickOrigin(d3.event);
})
.on('drag', (d, i, n) => {
  const target = d3.select(n[i]).node() as any;
  const m = target.getCTM();
  const x = d3.event.x - this.clickOrigin.x;
  const y = d3.event.y - this.clickOrigin.y;
  this.setClickOrigin(d3.event);
  this.translate(target, x, y);
});

缩放时会旋转 SVG。

zoom = d3.zoom()
.on('zoom', (d, i, n) => {
  const target = d3.select(n[i]).node() as …