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 de "no se puede leer el texto de propiedad 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, agregar debería funcionar, por lo que debe ser la .attr({})causa del problema. Sin embargo, funciona bien en jsfiddle.
¿Ha cambiado esta sintaxis en D3 v4? ¿Cómo sería correcto?
Nueva respuesta
Debido a que d3-selection-multiha quedado obsoleto, la solución adecuada es simplemente usar el attrmétodo habitual:
selection.attr("foo", foo)
.attr("bar", bar)
etc...
Respuesta anterior
Desde D3 v4 en adelante no puedes usar objetos para configurar attrni stylemás. 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 attra attrs(sí, como plural):
var textLabels = labelGroups.append("text").attrs({
//mind the 's' here-------------------------ˆ
});
Haz lo mismo con los estilos: debería ser styles, en plural, no style.
Si no desea cambiar todo esto, simplemente haga lo mismo de la forma "normal": set x, yy text-anchoren classsepare attr.
Aquí está la selection-multidocumentación: https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_attrs
