He tomado el ejemplo de 'react-d3-graph' en:

https://codesandbox.io/s/long-wood-7evr8?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js:138-417

Estoy intentando renderizar el componente Graph dentro del 'react-d3-graph' trabajando con datos no codificados mediante la lectura de datos de un archivo usando fetch.

Pero cuando leo los datos de un archivo a través de fetch() y asigno los datos leídos del archivo al componente, recibo estos mensajes en la consola y no se muestra nada.

react-d3-graph :: Graph : no ha proporcionado suficientes datos para que react-d3-graph muestre algo. Debe proporcionar al menos un nodo

react-d3-graph :: Graph :: está pasando datos no válidos a react-d3-graph. Debe incluir una matriz de enlaces, incluso si está vacía, en el objeto de datos que está pasando al componente.

Este mensaje se muestra antes de la salida de la consola de los datos leídos del archivo, por lo que es un problema de tiempo. He intentado leer pero no puedo encontrar una forma de evitar esto.

Alguien puede ayudarme porfavor. Gracias.

 import React, { Component } from 'react' import { Graph } from "react-d3-graph"; class GraphView extends Component { constructor(props) { super(props) this.state = { data : {} } } componentDidMount() { fetch("http://10.10.1.185:4200/chartdata.txt") .then((r) => r.text()) .then(text => { console.log("text=" + text); this.state.data = text console.log("this.state.data=" + this.state.data) }) } render() { const myConfig = { nodeHighlightBehavior: true, node: { color: "lightgreen", size: 200, highlightStrokeColor: "blue", }, link: { highlightColor: "lightblue", }, }; const onClickNode = function (nodeId) { window.alert(`Clicked node ${nodeId}`); }; const onClickLink = function (source, target) { window.alert(`Clicked link between ${source} and ${target}`); }; const onMouseOverNode = function (nodeId, node) { window.alert(`Alarms for ${nodeId} Coords: (${node.x}, ${node.y})`); }; const onRightClickNode = function (event, nodeId) { const clickedNode = { nodeId }; window.alert(`onRightClickNode link ${event} and ${nodeId}`); }; return ( <div> <Graph id="graph-id" data={this.state.data} config={myConfig} onClickNode={onClickNode} onClickLink={onClickLink} onRightClickNode={onRightClickNode} />; </div> ); } } export default GraphView