How to integrate d3js into Angular correctly?

Question

I want to read a JSON file with d3 and integrate it into Angular. Only with d3 my code works correctly, but if I add Angular, it finds errors:

ERROR in src/app/app.component.ts(50,64): error TS2339: Property 'x0' does not exist on type 'HierarchyNode'. src/app/app.component.ts(50,70): error TS2339: Property 'y0' does not exist on type 'HierarchyNode'. src/app/app.component.ts(54,44): error TS2339: Property 'x1' does not exist on type 'HierarchyNode'. src/app/app.component.ts(54,51): error TS2339: Property 'x0' does not exist on type 'HierarchyNode'. src/app/app.component.ts(55,45): error TS2339: Property 'y1' does not exist on type 'HierarchyNode'. src/app/app.component.ts(55,52): error TS2339: Property 'y0' does not exist on type 'HierarchyNode'.

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

    interface ResponseData {
       value: number;
       x0: number;
       y0: number;
       x1: number;
       y1: number;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  title = 'treemap';

  ngOnInit() {

d3.json<ResponseData>('../assets/test2.json')
.then((data) => {

  const w = window.innerWidth - 20;
  const h = window.innerHeight - 20;

  const treemapLayout = d3.treemap()
    .size([w, h])
    .paddingOuter(10);

  console.log(w);
  console.log(h);

  const root = d3.hierarchy(data);

  root.sum(function (d) {
    return d.value;
  });

  treemapLayout.tile(treemapOwnTiling);
  treemapLayout(root);

  const nodes = d3.select('svg g')
    .selectAll('g')
    .data(root.descendants())
    .enter()
    .append('g')
    .attr('transform', function (d) { return 'translate(' + [d.x0, d.y0] + ')'; });

  nodes
    .append('rect')
    .attr('width', function (d) { return d.x1 - d.x0; })
    .attr('height', function (d) { return d.y1 - d.y0; });

  /*nodes
    .append('text')
    .attr('dx', 4)
    .attr('dy', 10)
    .attr('class', 'small')
    .text(function (d) {
      return d.data.name;
    })*/

    const ufo = nodes
      .append('foreignObject')
      .attr('xmlns', 'http://www.w3.org/1999/xhtml');

    const div = ufo
      .append('xhtml:div')
      .attr('xmlns', 'http://www.w3.org/1999/xhtml');

    div
      .append('xhtml:i')
      .attr('xmlns', 'http://www.w3.org/1999/xhtml')
      .attr('class', 'fas fa-pencil-alt')
      .append('xhtml:i')
      .attr('xmlns', 'http://www.w3.org/1999/xhtml')
      .attr('class', 'fas fa-flag')
      .append('xhtml:i')
      .attr('xmlns', 'http://www.w3.org/1999/xhtml')
      .attr('class', 'fas fa-bell')
      .append('xhtml:i')
      .attr('xmlns', 'http://www.w3.org/1999/xhtml')
      .attr('class', 'fas fa-user');
});
  }
}

Answer 1

你可以尝试这个

function (d:any)