D3 v4 - không thể đọc văn bản thuộc tính của null

Question

Tôi đã cố gắng chuyển đổi một ví dụ biểu đồ D3 đẹp (https://jsfiddle.net/thudfactor/HdwTH/) thành thành phần Angular2 với D3 v4 mới.

tuy nhiên tôi nhận được một "không thể đọc văn bản tài sản của null" ngoại lệ với đoạn mã sau:

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 là một lựa chọn, thêm nên làm việc, vì vậy nó phải là .attr({}) gây ra vấn đề. Tuy nhiên nó hoạt động tốt trong jsfiddle.
Cú pháp này có thay đổi trong D3 v4 không? Làm thế nào nó sẽ là chính xác?

Cảm ơn!

Answer 1

Trong phiên bản D3.x mới, bạn không thể sử dụng các đối tượng để đặt attr hoặc style. Để làm như vậy, bạn phải tham khảo thư viện nhỏ D3-chọn-đa:

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

Sau khi làm điều đó, thay đổi mã của bạn attr-attrs (vâng, giống như một số nhiều):

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

Làm tương tự cho các kiểu: phải là styles, như số nhiều, không phải là style.

Nếu bạn không muốn thay đổi tất cả điều này, chỉ cần làm như là cách "bình thường": set x, y, text-anchor và class ở riêng attr.

Đây là tài liệu selection-multi: https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_attrs