Estoy usando este ejemplo junto con ReactJS para dibujar un diagrama de árbol plegable. Ejemplo: https://bl.ocks.org/d3noob/43a860bc0024792f8803bba8ca0d5ecd . El problema al que me enfrento es que mis hijos se recuperan de un punto final de API al hacer clic en el nodo en lugar de tenerlo todo a la vez, ya que eso podría reducir el rendimiento de la página. Tengo el treeData mencionado en el ejemplo en mi estado y después de obtener los datos de la API estoy actualizando el estado, pero ¿cómo actualizo el nodo secundario en el que se hace clic y muestro los datos obtenidos? En el ejemplo, dado que todos los datos ya están allí, el siguiente método funciona perfectamente bien.
function click(d) { // API call here and after fetching the data continue with the below code. The problem here is the state data is updated but I don't think the graph is updating along with that. if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } update(d); }Podría alguien ayudarme con este asunto ? Gracias por adelantado.
Es difícil decirlo ya que no tengo la API para probar, pero necesita combinar datos nuevos y antiguos, transformar los datos en una d3.hierarchy y agregar los ._children a los nuevos nodos. Esto debería ser un comienzo de todos modos.
function click(d) { // get your new data const new_data = await getData() // or whatever // combine new data with old data, I'm assuming this will update treeData but I'm not sure d.children.push(new_data) // call the hierarchy on new data so it has the mike magic it needs root = d3.hierarchy(treeData, di => di.children) // add the ._children attribute d.children.forEach(di => collapse) // continue as usual if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } update(d); }No he probado esto, pero es donde empezaría.
** EDITAR ** d.children.push(new_data) podría no funcionar. Es posible que deba encontrar el nodo en el treeData original y agregarlo a los nodos secundarios, ya que d ya está transformado por jerarquía. Pero si puede agregarlo a d , eso suena más fácil.