使用angular和d3.js创建直方图

我不熟悉angular和d3.js，不知道如何使用这些技术堆栈创建直方图

我尝试使用默认的文档方式，但失败了，原因是类型“number”上不存在属性“price”。有人能帮忙吗

下面提供了示例代码片段

import * as d3 from 'd3';

@Component({
  selector: 'app-histogram',
  templateUrl: './histogram.component.html',
  styleUrls: ['./histogram.component.css']
})
// export type DataType = { x: any, y: any };
export class HistogramComponent implements OnInit {

  private svg: d3.Selection<SVGGElement, unknown, HTMLElement, any>;
  private margin = 50;
  private width = 750 - (this.margin * 2);
  private height = 400 - (this.margin * 2);

  constructor() { }

  private createSvg(): void {
    this.svg = d3.select('figure#histogram')
      .append('svg')
      .attr('width', this.width + (this.margin * 2))
      .attr('height', this.height + (this.margin * 2))
      .append('g')
      .attr('transform', 'translate(' + this.margin + ',' + this.margin + ')');
  }

  private drawBars(data: any[]): void {
    console.log(data);
    // Create the X-axis band scale
    const x = d3.scaleLinear()
      .range([0, this.width])
      .domain([0, 1000]);


    // Draw the X-axis on the DOM
    this.svg.append('g')
      .attr('transform', 'translate(0,' + this.height + ')')
      .call(d3.axisBottom(x))
      .selectAll('text')
      .attr('transform', 'translate(0,' + this.height + ')');

    // set the parameters for the histogram
    const dom = x.domain();
    const histogram = d3.histogram()
      .value(d => d.price)   // I need to give the vector of value
      .domain([dom[0], dom[1]])  // then the domain of the graphic
      .thresholds(x.ticks(70)); // then the numbers of bins

    // And apply this function to data to get the bins
    const bins = histogram(data);

    // Create the Y-axis band scale
    const y = d3.scaleLinear()
      .domain([0, d3.max(bins, d => d.length)])
      .range([this.height, 0]);

    // append the bar rectangles to the svg element
    this.svg.selectAll('rect')
      .data(bins)
      .enter()
      .append('rect')
      .attr('x', 1)
      .attr('transform', (d: { x0: number | { valueOf(): number; }; length: number | { valueOf(): number; }; }) => 'translate(' + x(d.x0) + ',' + y(d.length) + ')')
      .attr('width', (d: { x1: number | { valueOf(): number; }; x0: number | { valueOf(): number; }; }) => Math.abs(x(d.x1) - x(d.x0) - 1))
      .attr('height', (d: string | any[]) => this.height - y(d.length))
      .style('fill', 'grey');

  }

  ngOnInit(): void {
    this.createSvg();
    // this.drawBars(this.data);
    d3.csv('/assets/histogram.csv').then(data => this.drawBars(data));
  }

}

import*从“d3”作为d3导入；
@组成部分({
选择器：“应用程序直方图”，
templateUrl:'./histogram.component.html'，
样式URL:['./histogram.component.css']
})
//导出类型DataType={x:any，y:any}；
导出类HistorogramComponent实现OnInit{
私有svg:d3.选择；
私人保证金=50；
专用宽度=750-（此.margin*2）；
私人高度=400-（本页边距*2）；
构造函数（）{}
私有createSvg（）：void{
this.svg=d3.select（'图#直方图'）
.append（'svg'）
.attr（'width'，this.width+（this.margin*2））
.attr（'height'，this.height+（this.margin*2））
.append（'g'）
.attr（'transform'，'translate（'+this.margin+'，'+this.margin+'））；
}
专用牵引杆（数据：任意[]）：无效{
控制台日志（数据）；
//创建X轴标注栏比例
常数x=d3.scaleLinear（）
.range（[0，此.width]）
.域（[0，1000]）；
//在DOM上绘制X轴
this.svg.append（'g'））
.attr（'transform'，'translate（0'，+this.height+'））
.call（d3.axisBottom（x））
.selectAll（'text'）
.attr（'transform'，'translate（0'，+this.height+'））；
//设置直方图的参数
const dom=x.domain（）；
常量直方图=d3.直方图（）
.value（d=>d.price）//我需要给出值的向量
.domain（[dom[0]，dom[1]]）//然后是图形的域
.thresholds（x.ticks（70））；//然后是存储箱的数量
//并将此功能应用于数据以获取存储箱
常量箱=直方图（数据）；
//创建Y轴标注栏比例
常数y=d3.scaleLinear（）
.domain（[0，d3.max（bin，d=>d.length）]）
.范围（[this.height，0]）；
//将条形矩形附加到svg元素
this.svg.selectAll（'rect'）
.数据（箱）
.输入（）
.append（'rect'）
.attr（'x'，1）
.attr（'transform'，（d:{x0:number |{valueOf（）：number；}；length:number{valueOf（）：number；}；}）=>'translate（'+x（d.x0）+'，'+y（d.length）+'））
.attr（'width'，（d:{x1:number |{valueOf（）：number；}；x0:number{valueOf（）：number；}；}）=>Math.abs（x（d.x1）-x（d.x0）-1））
.attr（'height'，（d:string | any[]）=>this.height-y（d.length））
.样式（“填充”、“灰色”）；
}
ngOnInit（）：void{
这个.createSvg（）；
//本.牵引杆（本.数据）；
d3.csv（'/assets/histogram.csv'）。然后（data=>this.drairs（data））；
}
}

下面是我使用的官方文件的链接：

[参考输入对象][1]

---

[1] ：https://i.stack.imgur.com/R75Nq.png

在控制台登录期间，您的数据是什么样子的？它是一个供您参考的javascript对象数组，已附加图像链接，值得检查对象中的属性是否包含名为“price”的属性？屏幕截图中显示的对象需要展开才能查看属性是的，数组包含更新了price属性的对象。为了更清晰，我猜价格是以字符串形式出现的。Try.value（d=>{console.log（'price'，d.price）；返回parseInt（d.price）；}）；如果它仍然不起作用，那么可能值得一试