向Jhipster网关添加D3库

npm install d3 --save

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

@Component({
  selector: 'app-d3-chart',
  templateUrl: './d3-chart.component.html',
  styleUrls: ['./d3-chart.component.css']
})
export class D3ChartComponent implements OnInit {
  constructor() { }

  ngOnInit(): void {
    this.createChart();
  }

  createChart(): void {
    const svg = d3.select('#chart')
      .append('svg')
      .attr('width', 500)
      .attr('height', 300);

    // 添加你的D3.js代码来创建图表
  }
}

import React, { useEffect } from 'react';
import * as d3 from 'd3';

const D3Chart = () => {
  useEffect(() => {
    const svg = d3.select('#chart')
      .append('svg')
      .attr('width', 500)
      .attr('height', 300);

    // 添加你的D3.js代码来创建图表
  }, []);

  return <div id="chart"></div>;
};

export default D3Chart;

<div id="chart"></div>

<div id="chart"></div>

npm install d3@6.7.0 --save

const data = [4, 8, 15, 16, 23, 42];

const svg = d3.select('#chart')
  .append('svg')
  .attr('width', 500)
  .attr('height', 300);

svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => i * 70)
  .attr('y', (d) => 300 - d * 5)
  .attr('width', 65)
  .attr('height', (d) => d * 5)
  .attr('fill', 'steelblue');