不能在D3 v4中使用带有对象的attr

Question

我一直试图将一个漂亮的D3图表示例（https://jsfiddle.net/thudfactor/HdwTH/）转换为带有新D3 v4的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;

});

labelgroups是一个选择，append应该工作，所以它必须是.attr({})导致问题。然而它确实在jsfiddle中工作正常。

D3 v4中是否更改了此语法？怎么会这么正确？

谢谢！