D3 v4 - 無法讀取空屬性文本

我一直在試圖用D3 D3新版本將一個漂亮的D3圖表示例（https://jsfiddle.net/thudfactor/HdwTH/）轉換爲Angular2組件。D3 v4 - 無法讀取空屬性文本

然而，我得到下面的代碼是「無法讀取空的屬性text」例外：

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中是否更改了此語法？它將如何正確？

謝謝！

來源

2016-07-31 TommyF

在新的D3 v4.x中，您的不能使用對象設置attr或style。要做到這一點，你必須引用小型圖書館D3選擇的多：

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

這樣做後，更改您的代碼從attr到attrs（是的，象是個複數）：

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

對樣式做同樣的事情：它應該是styles，作爲複數，而不是style。

如果你不想改變這一切，根本就作爲「常規」方式：套x，y，text-anchor和class在單獨attr。

這裏是selection-multi文檔：https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_attrs

來源

2016-07-31 13:51:14

D3 v4 - 無法讀取空屬性文本

回答

相關問題