Angular 中的简单代码会引发 TS2345 和 TS2339 错误

Question

我正在尝试学习使用带角度的 D3。作为一个初学者，我正在尝试实现几年前由 William Liu 编写的一个简单项目 (http://bl.ocks.org/WilliamQLiu/76ae20060e19bf42d774) 我可以复制大部分代码，但得到如下编译错误：

错误 TS2345：“BaseType”类型的参数不可分配给“ContainerElement”类型的参数。 类型“元素”不可分配给类型“容器元素”。 类型“元素”不可分配给类型“SVGGElement”。 'Element' 类型中缺少属性 'farthestViewportElement'。

错误 TS2339：“BaseType”类型上不存在属性“数据集”。 “元素”类型上不存在属性“数据集”。

错误 TS2339：“BaseType”类型上不存在属性“数据集”。 “元素”类型上不存在属性“数据集”。

我创建了一个名为 dragex 的组件。代码如下

import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';


@Component({
  selector: 'dragex',
  templateUrl: './dragex.component.html',
  styleUrls: ['./dragex.component.css']
})
export class DragexComponent implements OnInit {
 private dataset = [
    { x: 100, y: 110 },
    { x: 83, y: 43 },
    { x: 92, y: 28 },
    { x: 49, y: 74 },
    { x: 51, y: 10 },
    { x: 25, y: 98 },
    { x: 77, y: 30 },
    { x: 20, y: 83 },
    { x: 11, y: 63 },
    { x:  4, y: 55 },
    { x:  0, y:  0 },
    { x: 85, y: 100 },
    { x: 60, y: 40 },
    { x: 70, y: 80 },
    { x: 10, y: 20 },
    { x: 40, y: 50 },
    { x: 25, y: 31 }
  ];

  constructor() { }

  ngOnInit() {
    this.drawchart();
  }

  private drawchart() {
    const margin = {
      top: 40,
      right: 20,
      bottom: 20,
      left: 40
    },
    width = 960, // window.innerWidth,
    height = 500, // window.innerHeight,
    radius = 6;

  let svg = d3.select('body').append('svg')
      .attr('width', width )
      .attr('height', height);

  let xScale = d3.scaleLinear()
    .domain([0, d3.max(this.dataset, function(d) { return d.x + 10; })])
    .range([margin.left, width - margin.right]);

    let yScale = d3.scaleLinear()
    .domain([0, d3.max(this.dataset, function(d) { return d.y + 10; })])
    .range([margin.top, width - margin.bottom]);

    let xAxis = d3.axisTop(xScale);
    let yAxis = d3.axisLeft(yScale);

    let circleAttrs = {
      cx: function(d) { return xScale(d.x); },
      cy: function(d) { return yScale(d.y); },
      r: radius
    } ;

    svg.append('g')
      .attr('class', 'axis')
      .attr( 'transform', 'translate(' + [margin.left, 0] + ')')
      .call(yAxis);

    svg.selectAll('circle')
      .data(this.dataset)
      .enter().append('circle')
      .attr('cx', circleAttrs.cx)
      .attr('cy', circleAttrs.cy)
      .attr('r', circleAttrs.r)
      .on('mouseover', handleMouseOver)
      .on('mouseout', handleMouseOut);

    svg.on('click', function() { 
      let coords = d3.mouse(this);

      let newData = {
        x: Math.round(xScale.invert(coords[0])),
        y: Math.round(yScale.invert(coords[1]))
      };


      this.dataset.push(newData);


      svg.selectAll('circle')
      .data(this.dataset)
      .enter().append('circle')
      .attr('cx', circleAttrs.cx)
      .attr('cy', circleAttrs.cy)
      .attr('r', circleAttrs.r)
      .on('mouseover', handleMouseOver)
      .on('mouseout', handleMouseOut);

    });




    function handleMouseOver(d, i) {
      d3.select(this)
        .attr('fill', 'green')
        .attr('r', radius * 2 );

      svg.append('text')
        .attr('id', 't' + d.x + '-' + d.y + '-' + i)
        .attr('x', function() { return xScale(d.x) - 30 ; })
        .attr('y', function() { return yScale(d.y) - 15 ; })
        .text(d.x + ',' + d.y );

    }

    function handleMouseOut(d, i) {
      d3.select(this)
        .attr('fill', 'black')
        .attr( 'r', radius);

      d3.select('id').remove();
    }
  }
}

错误被抛出 let coords = d3.mouse(this); this.dataset.push(newData); .data(this.dataset)

相同的 plunker 可在 https://plnkr.co/edit/pM5ZsVw7EOm4bMI94JKj?p=info

在上面几行中将鼠标悬停在this 上时，它会显示d3.BaseType，而理想情况下它应该显示this: this

我看过其他文章，但没有一篇指向相同的解决方案。

救命！

================================================ ==============================

我将该代码中的函数转移到一个新函数中（如下所示）并且错误消失了。 现在只有一个 DOM 错误，显示 this.dataset.push 不是函数。

function onClickIn(d, i) {
  let coords = d3.mouse(this);
  console.log('here in onclick function');

  let newData = {
    x: Math.round(xScale.invert(coords[0])),
    y: Math.round(yScale.invert(coords[1]))
  };

  console.log('new point- x:'+ newData.x + ',' + newData.y);
  this.dataset.push(newData);

  svg.select('circle')
    .data(this.dataset)
    .enter().append('circle')
    .attr('cx', circleAttrs.cx)
    .attr('cy', circleAttrs.cy)
    .attr('r', circleAttrs.r)
    .on('mouseover', handleMouseOver)
    .on('mouseout', handleMouseOut);
}

Answer 1

尝试替换：

let coords = d3.mouse(this);

对于

let aux:any = this
let coords = d3.mouse(aux);

这样你就可以欺骗 Typescript 编译器了。

Answer 2

使用type assertion

const coords = d3.mouse(this as SVGGElement);