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

  • Comparación de D3 y Dojo GFX
  • D3 4.0+ no crea una variable global d3 cuando se importa a Jupyter Notebook
  • Doblar SVG `<g>` alnetworkingedor de Curve
  • ¿Admite D3.js las aplicaciones mobilees nativas?
  • Problema de cuadrícula del gráfico de línea D3.js
  • Vinculación de varios charts circulares a una única leyenda en dc.js
  • No se puede seleccionar el elemento SVG foreignObject en d3
  • ¿Cómo agregar d3 (javascript) a una aplicación vaadin?
  • Crear una selección d3 sobre un elemento SVG separado existente
  • Extensión del tree jerárquico d3js para representar la topología
  • Los círculos de SVG no se vuelven a ubicar al hacer zoom en el map de folletos
  • Dibuja un círculo D3 con colors degradados
  • d3.tree => transform no parece funcionar
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.