A visualization problem occurs after NetworkX is imported into Mesa

[bruce881225]

Hello, everyone!
First of all, I want to thank you for the great work you've done for Mesa.
I am new to python and mesa, and I am trying to place the Agent on all nodes of a simple NetworkX digraph, with the colors and positions in the node attributes representing the Agent's initial positions and colors. However, the result of my visualization is different from the NetworkX digraph I created. How can I modify my code?
(I haven't decided what the Agent's behavior is yet, so I'll represent it with a color change.)

[rht]

The frontend visualization is rendered using JavaScript via D3.js.

We have a new experimental Python-only frontend that uses NetworkX, but the positions are still hardcoded to be in a spring layout:

mesa/mesa/experimental/jupyter_viz.py

Lines 276 to 284 in 2be2f05

	def _draw_network_grid(model, space_ax, agent_portrayal):
	graph = model.grid.G
	pos = nx.spring_layout(graph, seed=0)
	nx.draw(
	graph,
	ax=space_ax,
	pos=pos,
	**agent_portrayal(graph),
	)

. To use this, you have to install from the latest main on Git. Tutorial on the new frontend can be found at https://mesa.readthedocs.io/en/stable/tutorials/visualization_tutorial.html.

This is an example of it: projectmesa/mesa-examples#56 (not yet merged because we haven't released a version with the NetworkX frontend yet, but a release is expected by the end of the month).

To override the current network space drawer, you can instead write your own custom space draw. See e.g. https://github.com/projectmesa/mesa-examples/blob/main/examples/sugarscape_g1mt/app.py. But the API for the function signature has changed from def space_drawer(viz): to def space_drawer(model, agent_portrayal):.

This hasn't been properly documented because it's very new. You could also submit a pull request to modify the network drawer to detect that the nodes have pos attribute, and will use that instead of generating a spring layout.

[rht]

I didn't finish on elaborating this sentence:

The frontend visualization is rendered using JavaScript via D3.js.

The JS frontend hardcodes the layout to a spring layout. But it's easier to use the new Python frontend to make custom change instead of modifying the JS frontend.