Cannot use attr with an object in D3 v4
<p>I've been trying to convert a nice D3 chart example ( <a href="https://jsfiddle.net/thudfactor/HdwTH/" rel="nofollow noreferrer">https://jsfiddle.net/thudfactor/HdwTH/</a> ) to an Angular2 component with the new D3 v4.</p>
<p>I do however get a &quot;cannot read property text of null&quot; exception with the following code:</p>
<pre><code>var textLabels = labelGroups.append(&quot;text&quot;).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 &gt; 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 &gt; 0) ? &quot;start&quot; : &quot;end&quot;;
    },
    'class': 'label-text'
}).text(function (d, i) {      &lt;--------------- exception
    return d.data.label;
});
</code></pre>
<p>labelgroups is a selection, append should work, so it must be the <code>.attr({})</code> causing the problem. It does however work fine in the jsfiddle.</p>
<p>Has this syntax changed in D3 v4? How would it be correct?</p>