Graduate senior, after graduation, I was working in the company where I was interning. The department director gave me a task and asked me to write a configurable visual react component. However, I don’t quite understand what this configurable means. I am currently I plan to use Three.js as the core to make a configuration-type react component similar to echarts, but I still feel confused. In the past few days, I have been writing and deleting code, and I still don’t have an understanding of configurability. Very clear.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
To put it simply, the most common medium for visualization is graphics charts. Whether it is based on canvas (such as echart) or svg (such as d3) or WebGL (such as Three.js), the main job of creating a chart is to pass the appropriate data. and parameters.
When it comes to React, it naturally means that various chart types must be encapsulated into components for use, and components are all state-driven, which means that the passed state changes can cause the components to be re-rendered, and the visual performance is so-called "Real-time updates".
So, "configurable" means nothing more than that data and parameters cannot be hard-coded in components, but that components can be reasonably designed to render these chart components through parameter passing. The desired effect is that the internal implementation of the component (chart assembly and rendering process) is hidden, and the data that determines the specific presentation of the component can be passed through parameters, thereby achieving higher scalability, maintainability, and readability. , reusability, etc.
There will be no problem if you follow this idea, but there will be a lot of details to be dealt with in the middle, and it will also test your design ability (I mean code and interface design). Let’s start with the simplest things, such as drawing. A most basic Bar/Column chart. Basic attributes such as series data, x/y axis, label, unit, scale, legend, etc. can be passed through parameters, and the components can be automatically updated when the parameters change. .
Is the only demand you need is a word from the director? No other documents?