[Vuejs]-How to update the graph if a new user has joined the chat vue,js?

0👍

The problem is, that you do not rerender the chart, after the users have been updated.

Solution

Modularise your d3 chart code into different life cycle functions. The init function creates the static parts of the chart, e.g. scales, group elements and so on . The update function takes in the data as a parameter and renders the changing parts of the chart, based on the data parameter, e.g. the links and link texts in your implementation. Make proper use of join instead of enter in the render function, to efficiently rerender.
You can also add a destroy function, that could for example remove hanging references to event listeners. Maybe use a class to encapsulate your chart.

Run the init function when the component is mounted.

Create a watcher on your vue component, that triggers, when the users property is updated. Run the render function, every time the watcher is triggered and pass in the users.

Further reading about d3.js join function: https://github.com/d3/d3-selection/blob/v2.0.0/README.md#selection_join

Leave a comment