d3 v4与角v4直方图语法

Question

我正在为d3直方图构建一个非常简单的角度控制。

我在网上看过许多教程，它们似乎都在为构建直方图的回收箱提供一种特定的语法：

  let datagenerator = d3.histogram<number>()
  .domain(d => x.domain())
  .thresholds(x.ticks(20));

  let bins = datagenerator(this.data);

当我尝试这样做时，我会得到以下错误：

 ERROR in src/app/d3/histogram/histogram.component.ts (45,25): 
 Supplied parameters do not match any signature of call target.

更新:在尝试了下面的建议之后，我正在取得进展，但现在得到了这个错误：

ERROR in src/app/d3/histogram/histogram.component.ts (48,15): Argument of type '(d: number[]) => number[]' is not assignable to parameter of type '(values: number[]) => [number, number]'.
  Type 'number[]' is not assignable to type '[number, number]'.
Property '0' is missing in type 'number[]'.

ERROR in src/app/d3/histogram/histogram.component.ts (54,15): Argument of type '(string | number)[]' is not assignable to parameter of type '(number | { valueOf(): number; })[]'.
  Type 'string | number' is not assignable to type 'number | { valueOf(): number; }'.
Type 'string' is not assignable to type 'number | { valueOf(): number; }'.

ERROR in src/app/d3/histogram/histogram.component.ts (54,48): Property 'length' does not exist on type '{}'.

以下是全文的来源：

import { Component, OnInit, OnChanges, ViewChild, ElementRef, Input, 
ViewEncapsulation } from '@angular/core';
import * as d3 from 'd3';

@Component({
  selector: 'histogram',
  templateUrl: './histogram.component.html',
  styleUrls: ['./histogram.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class HistogramComponent implements OnInit {

  @ViewChild('chart') private chartContainer:ElementRef;
  @Input() private histogramdata:Array<number>;

  private margin:any = {top: 20, bottom: 20, left: 20, right: 20};
  private chart:any;
  private svg:any;
  private width;
  private height;
  private data;

  constructor() { }

  createChart() {
    let element = this.chartContainer.nativeElement;
    this.width = element.offsetWidth - this.margin.left - this.margin.right;
    this.height = element.offsetHeight - this.margin.top - this.margin.bottom;
    this.svg = d3.select(element).append('svg')
      .attr('width', element.offsetWidth)
      .attr('height', element.offsetHeight);

    // chart plot area
    this.chart = this.svg.append('g')
      .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);
  }

  updateChart() {

    let formatCount = d3.format(",.0f");
    //this.data = this.histogramdata;
    this.data = [0.1,0.2,0.3,0.4];


    let x = d3.scaleLinear<number>()
      .rangeRound([0, this.width]);

    let datagenerator = d3.histogram<number, number>()
      .domain(d => x.domain())
      .thresholds(x.ticks(20));

    let bins = datagenerator(this.data);

    let y = d3.scaleLinear<number>()
      .domain([0, d3.max(bins, d => { return d.length; })])
      .range([this.height, 0]);

    let bar = this.chart.selectAll(".bar")
      .data(bins)
      .enter().append("g")
      .attr("class", "bar")
      .attr("transform", d => {
        return "translate(" + x(d.x0) + "," + y(d.length) + ")";
      });

    let barWidth = x(bins[0].x1) - x(bins[0].x0) - 1;

    bar.append("rect")
      .attr("x", 1)
      .attr("width", barWidth)
      .attr("height", d =>  { return this.height - y(d.length); });

    let textLoc = (x(bins[0].x1) - x(bins[0].x0)) / 2;

    bar.append("text")
      .attr("dy", ".75em")
      .attr("y", 6)
      .attr("x", textLoc)
      .attr("text-anchor", "middle")
      .text(d => { return formatCount(d.length); });

    this.chart.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + this.height + ")")
      .call(d3.axisBottom(x));

  }

  ngOnInit() {
  }

}

我知道我们必须在类型记录兼容性的调用中添加一些类型修饰器，但我不理解的是为什么错误提示直方图函数应该接受一个参数。我看到的所有例子都没有参数。

谢谢你看一看。如有任何建议请见谅。

Answer 1

根据来源和测试的说法，签名是：

d3.histogram<number, number>()

一组数字。

或者：

d3.histogram<MixedObject, number | Date>()

其中“混合对象”是一个自定义类型匹配您的数据，并且您是按数字或日期绑定。

为了进一步帮助，用你的数据样本来更新你的问题.

编辑

再说一遍，看看来源。很容易理解。第一个参数是要调用直方图函数的数组中的类型。例如，在value函数中使用它，如：

.value(( d: number, i: number ) => {
  return d;
})

第二种类型是用于将两个部分设置为domain的类型，以及指定为阈值的数组中的类型。它还作为x0和x1属性的类型在返回对象中使用。

尽管如此，我只是在Angular2 2/类型记录中做了一个简单的测试：

    let dataGenerator = d3.histogram<number, number>()
        .thresholds([0.2,0.4,0.6,0.8,1]);

    let data = d3.range(100).map(() => {
        return Math.random();
    });

    console.log(dataGenerator(data));

它既建造又运行。

为了进一步帮助您，请提供一套完整的代码，以重新生成您的问题。

编辑2

错误实际上出现在这里：

let datagenerator = d3.histogram<number, number>()
  .domain(d => x.domain()) //<-- ERROR
  .thresholds(x.ticks(20));

x.domain()返回number[]，而histogram<number, number().domain(则期待[number, number]。

我会像这样解决的：

let dom : number[] = x.domain();
let datagenerator = d3.histogram<number, number>()
  .domain([ dom[0], dom[1] ])
  .thresholds(x.ticks(20));