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. 

UPDATE：

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 '{}'. 

012：嘗試下面的建議，我正在取得進展，但現在收到此錯誤後

下面是完整的源代碼：

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

按照source和tests，簽名是：

d3.histogram<number, number>() 

爲數字陣列。

或：

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

其中「混合對象」是一個自定義類型匹配你的數據，你是用數字或日期裝箱。

爲了進一步幫助，與您的數據樣本更新您的問題...

編輯

再次，看看源。這很容易理解。第一個參數是數組中要用來調用直方圖函數的類型。它用於，例如在所述value功能，如：

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

第二種類型是在設置兩個部分的domain和指定爲閾值陣列中的類型中使用的類型。它也用於返回對象中，作爲x0和x1屬性的類型。

所有這一切說，我只是做了一個簡單的測試中Angular2 /打字稿有：

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

而且這兩者建立和運行。

爲了進一步提供幫助，請提供一組完整的代碼來重新生成您的問題。

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