D3 v4 - nullのプロパティテキストを読み取ることができません

Question

新しいD3 v4で素晴らしいD3グラフの例（https://jsfiddle.net/thudfactor/HdwTH/）をAngular2コンポーネントに変換しようとしました。私は、しかし、次のコードで「ヌルのプロパティテキストを読むことができない」例外を取得ん

：

var textLabels = labelGroups.append("text").attr({ 
    x: function (d, i) { 
     var centroid = pied_arc.centroid(d); 
     var midAngle = Math.atan2(centroid[1], centroid[0]); 
     var x = Math.cos(midAngle) * cDim.labelRadius; 
     var sign = (x > 0) ? 1 : -1 
     var labelX = x + (5 * sign) 
     return labelX; 
    }, 
    y: function (d, i) { 
     var centroid = pied_arc.centroid(d); 
     var midAngle = Math.atan2(centroid[1], centroid[0]); 
     var y = Math.sin(midAngle) * cDim.labelRadius; 
     return y; 
    }, 
    'text-anchor': function (d, i) { 
     var centroid = pied_arc.centroid(d); 
     var midAngle = Math.atan2(centroid[1], centroid[0]); 
     var x = Math.cos(midAngle) * cDim.labelRadius; 
     return (x > 0) ? "start" : "end"; 
    }, 
    'class': 'label-text' 
}).text(function (d, i) {  <--------------- exception 
    return d.data.label; 
}); 

labelgroups作業をする必要があります追加し、選択され、それが問題の原因.attr({})でなければなりません。しかし、それはjsfiddleで正常に動作します。
D3 v4でこの構文を変更しましたか？どのように正しいでしょうか？

ありがとうございます！新しいD3 v4.xので

Answer 1

、あなたできない使用はattrまたはstyleを設定するオブジェクト。そのためには、D3-選択マルチミニライブラリー参照することがあります。attrからattrsにあなたのコードを変更し、それをやった後

<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script> 

を（はい、複数など）：

var textLabels = labelGroups.append("text").attrs({ 
    //all the key-value pairs here 
}); 

スタイルも同じです：styles、複数の場合はstyleでなければなりません。

あなたは「通常の」方法として行うだけで、すべてこれを変更したくない場合は：別のattrにx、y、text-anchorとclassを設定します。

ここにはselection-multiのマニュアルがあります。https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_attrs