react-d3-graph

react-d3-graph copied to clipboard

Could you post the graph config you are using? It is hard to help without more information

Hi @Gangeshwar3 please refer to the Issue Bug Report template and provide the essential information so that we can assist you. Cheers!

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

I can confirm I'm seeing this issue as well. It seems to be intermittent. The graph was rendering fine. I went away for lunch, came back, navigated back to the screen and it was rendering in the top corner as the original poster mentioned

Steps to Reproduce Happens on initial load

Expected behavior For the graph to fill the available container

Screenshots Nothing that would add more value than the original poster

Environment OS: macOS Catalina (10.15.7) Browser: Chrome (85.0.4183.121) react-d3-graph : Latest (2.5.0) d3: 6.2.0 react: 16.3.1

Graph config I have tried with both the below as well as the default config (i.e. not providing a prop of my own)

  const graphConfig = {
    node: {
      color: '#828282',
      size: 300,
      fontSize: 15,
      labelProperty: 'title',
    },
    link: {
      color: '#828282',
    },
    directed: true,
  };

I've seen that console error that the original poster also included. I saw that you have fixed this, but not released it yet. I did confirm this doesn't seem to be the cause as that console error appears to be on the link, so removed all links, did not see the console error, but the graph still did not render correctly

Update I tried downgrading to 2.4.1 which did not resolve the situation.

I tried adding a delay to the render of the chart which does seem to resolve the situation. It seems like there is a race condition between the amount of space the graph thinks it has to use and when the parent component finishes rendering so it sets the coordinate to 0,0. Hopefully this workaround is useful to others and in helping you track down a solution.

function RelationshipsChart({ relationships }) {
  const [shouldRender, setShouldRender] = React.useState(false);
  React.useEffect(() => {
    const timeout = setTimeout(() => setShouldRender(true), 1000);

    return () => clearTimeout(timeout);
  }, []);

  const graphData = React.useMemo(() => {
    const nodes = Object.entries(relationships.nodes).map(([id, node]) => {
      return {
        id,
        title: node.title,
      };
    });
    const links = relationships.edges.map((edge) => {
      return {
        source: edge.id1,
        target: edge.id2,
      };
    });
    return { nodes, links };
  }, [relationships]);

  const graphConfig = {
    node: {
      color: '#828282',
      size: 300,
      fontSize: 15,
      labelProperty: 'title',
    },
    link: {
      color: '#828282',
    },
    directed: true,
  };

  return (
    <If condition={shouldRender}>
      <Graph
        id="relationships"
        data={graphData}
        config={graphConfig}
      />
    </If>
  );
}

Thanks a lot, @lifehackett, for sharing the workaround in detail.

Hi @danielcaldas, any updates?

I think in my case it happened when there are just nodes without links.