TommyF TommyF - 3 months ago 20
Javascript Question

D3 v4 - cannot read property text of null

I've been trying to convert a nice D3 chart example ( https://jsfiddle.net/thudfactor/HdwTH/ ) to an Angular2 component with the new D3 v4.

I do however get a "cannot read property text of null" exception with the following code:

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 is a selection, append should work, so it must be the
.attr({})
causing the problem. It does however work fine in the jsfiddle.

Has this syntax changed in D3 v4? How would it be correct?

Thanks!

Answer

In the new D3 v4.x, you cannot use objects to set attr or style. To do so, you have to reference the mini library D3-selection-multi:

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

After doing that, change your code from attr to attrs (yes, like a plural):

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

If you don't want to change all this, simply do as the "regular" way: set x, y, text-anchor and class in separate attr.

Here is the selection-multi documentation: https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_attrs

Comments