D3 v4: imansible leggere il testo delle proprietà di null

Ho cercato di convertire un buon esempio di grafico D3 ( https://jsfiddle.net/thudfactor/HdwTH/ ) in un componente Angular2 con la nuova D3 v4.

Tuttavia ottengo un’eccezione “non posso leggere il testo delle proprietà di null” con il seguente codice:

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 è una selezione, append dovrebbe funzionare, quindi deve essere il .attr({}) causa il problema. Funziona comunque bene nel jsfiddle.
Questa syntax è cambiata in D3 v4? Come sarebbe corretto?

Grazie!

In D3 v4 (e v5 pure), non puoi usare oggetti per impostare attr o style . Per fare ciò, devi fare riferimento alla mini-libreria D3-selection-multi:

  

Dopo averlo fatto, cambia il tuo codice da attr a attrs (sì, come al plurale):

 var textLabels = labelGroups.append("text").attrs({ //mind the 's' here-------------------------ˆ }); 

Fai lo stesso per gli stili: dovrebbe essere uno styles , al plurale, non uno style .

Se non vuoi cambiare tutto questo, fallo semplicemente come “normale”: imposta x , y , text-anchor e class in attr separato.

Ecco la documentazione selection-multi : https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_attrs