Javascript 无法对D3 v4中的对象使用attr

我一直在尝试用新的D3V4将一个不错的D3图表示例（）转换为Angular2组件

但是，我确实收到一个“无法读取null的属性文本”异常，代码如下：

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

var textLabels=labelGroups.append（“text”）.attr({
x：功能（d，i）{
var形心=pied_弧形心（d）；
var midAngle=Math.atan2（质心[1]，质心[0]）；
var x=数学cos（中间角）*cDim.labelRadius；
变量符号=（x>0）？1:-1
var labelX=x+（5*符号）
返回标签；
},
y：函数（d，i）{
var形心=pied_弧形心（d）；
var midAngle=Math.atan2（质心[1]，质心[0]）；
变量y=数学sin（中间角）*cDim.labelRadius；
返回y；
},
“文本锚定”：函数（d，i）{
var形心=pied_弧形心（d）；
var midAngle=Math.atan2（质心[1]，质心[0]）；
var x=数学cos（中间角）*cDim.labelRadius；
返回（x>0）？“开始”：“结束”；
},
“类”：“标签文本”
}).text（函数（d，i）{从D3 v4开始，您不能再使用对象来设置
attr
或
style
。为此，您必须参考迷你库D3选择：

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

对样式执行相同的操作：它应该是
样式
，作为复数，而不是
样式

如果您不想更改所有这些，只需按照“常规”方式执行：在单独的
attr
中设置
x
、
y
、
文本锚定
和
class

以下是
选择多个
文档：
你能展示一个
常规方式的例子吗：设置x，y
？谢谢！@Honghe.Wu像这样：
selection.attr（“x”，foo.attr（“y”，bar）.attr（“文本锚定”，baz.attr（“类，foobar”）；
var textLabels = labelGroups.append("text").attrs({
    //mind the 's' here-------------------------ˆ
});