No se puede usar attr con un objeto en D3 v4

He estado intentando convertir un buen ejemplo de gráfico D3 ( https://jsfiddle.net/thudfactor/HdwTH/ ) en un componente Angular2 con el nuevo D3 v4.

Sin embargo, obtengo una excepción “no se puede leer el texto de propiedad de nulo” con el siguiente código:

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 es una selección, el apéndice debería funcionar, por lo que debe ser el .attr({}) causa el problema. Sin embargo, funciona bien en el jsfiddle.
¿Ha cambiado esta syntax en D3 v4? ¿Cómo sería correcto?

¡Gracias!

One Solution collect form web for “No se puede usar attr con un objeto en D3 v4”

En D3 v4 (y v5 también), no puede usar objetos para establecer un style o attr . Para hacerlo, debes hacer referencia a la mini biblioteca D3-selection-multi:

  

Después de hacer eso, cambie su código de attr a attrs (sí, como un plural):

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

Haga lo mismo para los estilos: debe ser styles , como plural, no style .

Si no quieres cambiar todo esto, simplemente hazlo de la manera “normal”: establece x , y , text-anchor y class en attr separado.

Aquí está la documentación de selection-multi : https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_attrs

  • ejecutando código D3 en DOM listo sin jquery
  • Aumento de la brecha entre los nodos de mi layout de tree D3
  • D3 Prevenir doble clic Zoom
  • Problemas al posicionar nodos con d3js force-layout. Nodos "reingresando" cada actualización de datos, ejemplo dentro
  • d3.js - cómo insert nuevos elementos hermanos
  • ¿Cómo configurar un eje nvd3 para usar cadenas en lugar de valores numéricos?
  • D3 obtiene el elemento anterior en .data ()
  • La tensión de la curva es extraña en d3 v4
  • Árbol de burbujas en d3?
  • La function d3 extent con dates usando dc.js y crossfilter produce resultados diferentes
  • Envoltura de text en D3
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.