d3角度2円チャートd3.arcタイプエラー

Question

このエラーが発生します：'PieArcDatum'は 'DefaultArcObject'タイプのパラメータに割り当てられません。このコード行で型の引数 "translate（" + labelArccentroid（d）+ "）";助けてください！

すべては、このコードが達成すべきラベル付けとは別に動作します。

角度2をcliインターフェイス（webpack）で実行しています。

下記のコードをご覧ください。

let element = this.chartContainer.nativeElement; 

// finds the width 
this.width = element.offsetWidth - this.margin.left - this.margin.right; 
this.height = element.offsetHeight - this.margin.top - this.margin.bottom; 

// gets the html object for d3 to manipuluate 
let svg = d3.select(element).append('svg') 
    .attr('width', this.width) 
    .attr('height', this.height); 

// creates the pie chart object 
var pieChart = svg.append("g").attr("transform", "translate(" + this.width/2 + "," + this.height/2 + ")"); 

// finds the maximum width or height - whichever is smallest 
var radius = Math.min(this.width, this.height)/2; 

// creates the information to create the pie chart circle 
var arc = d3.arc() 
    .innerRadius(0) 
    .outerRadius(radius); 

// creates a function to read in data and deduce the correct angles 
let pie = d3.pie<Datum>().sort(null).value((d: Datum):number => d.quantity); 

// uses the pie function to work out the correct angles for the pie chart 
var piedata = pie(this.data); 


// used to edit the pie chart colours 
var colour = d3.scaleOrdinal(d3.schemeCategory20b); 

//uses the arc and pie data functions to create the pie chart 
pieChart.selectAll("path") 
    .data(piedata) 
    .enter() 
    .append("path") 
    .attr("d", <any>arc) 
    .attr('fill', function(d) { 
     return colour(d.data.category); 
     }); 
    ; 

    var labelArc = d3.arc() 
    .innerRadius(0) 
    .outerRadius(radius); 

var selection = pieChart.selectAll("text").data(piedata); 
selection.enter().append("text") 
.attr("transform", function(d) { 
    return "translate(" + labelArc.centroid(d) + ")"; 
    }) 
    .attr("dy", ".35em") 
    .text(function(d) { return d.data.category; }); 

}

Answer 1

は、それが動作するようになった、明示的に数値としての半径をキャストし、代わりに、データムデータ型のデータの数値の配列を使用します。コードは今すぐ追加する

private data: Array<number>; 

と

var radius:number = Math.min(this.width, this.height)/2; 

と

var labelArc = d3.arc() 
.innerRadius(radius-40) 
.outerRadius(radius); 

this.pieChart.selectAll("text").data(piedata).enter().append("text") 
.attr("transform", function(d) { 
    return "translate(" + labelArc.centroid(d) + ")"; 
    }) 
    .attr("dy", ".35em") 
    .text(function(d) { return d.value});