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() {
  }

}

我知道我们必须在调用typescript兼容性时添加一些类型装饰器，但我不明白为什么错误表明直方图函数应该采用参数。我见过的所有例子都没有参数。

谢谢你看看。任何建议表示赞赏。

Answer 1

根据source和tests，签名为：

d3.histogram<number, number>()

表示数字数组。

或：

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

其中＆＃34;混合对象＆＃34;是与您的数据的自定义类型匹配，您按数字或日期进行分箱。

为了进一步提供帮助，请使用您的数据样本更新您的问题...

<强> EDITS

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

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

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

所有这一切，我只是在Angular2 / Typescript中做了一个简单的测试：

    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));

d3 v4和angular v4直方图语法

1 个答案: