javascript - D3 v4: no se puede leer el texto de la propiedad nulo

d3 documentation

Question

He intentado 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 de "no se puede leer el texto de la 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;
});

grupos de etiquetas 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 jsfiddle.
¿Ha cambiado esta sintaxis en D3 v4? ¿Cómo sería correcto?

¡Gracias!

Answer 1

En el nuevo D3 v4.x, no puede usar objetos para establecer attr o style . Para hacerlo, debe hacer referencia a la mini biblioteca D3-selection-multi:

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

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

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

Haga lo mismo para los estilos: debe ser styles , como un 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