Design And Implementation Of Data Analysis Visualization Componentsbased On D3 And React

Internet technology is developing rapidly with the advent of modern times.More and more Internet products are closely related to our daily life.In the Web 4.0 era,service providers are no longer satisfied with the performance of their products,but inclined to attract users with high-quality user experience.Front-end interface,as the most direct-channel of communication between Internet products and users,can also reflects the characteristics and usability of an Internet product.In the Web 4.0 environment,the front-end of Internet products are highly independent and reusable.In order to meet the higher standards of the Web development,it is necessary to build a complete front-end component development process based on the concept of components,in order to enhance the robustness and reusability of the codes.Nowadays,there are quite a few open source front-end toolkits in the market,which only have single and simple functions.There exists no statistical component library especially for monitoring Internet products.Therefore,the paper will propose a construction process of statistical chart components with the characteristics of high decoupling,strong reusability and low intrusion,and explain how to develop components base on React and D3.js.1.Based on the actual requirement analysis of Web front-end,this paper explores the componentization idea and the virtual DOM algorithm of React.Combining the efficient data transformation algorithm D3,this paper puts forward an idea of designing and developing a set of general and efficient statistical chart component library.This paper formulates the design specifications and completes the prototype design as well as basic development scheme design.2.Using D3 visualization technology in React framework,this paper improves the basic SVG elements.This paper encapsulates components according to different levels and functions with the improved SVG elements.In this way,a set of visualization components for data analysis are developed and implemented.3.These chart components are used in the front-end pages of a network security monitoring Website.This paper tests the usability of the components according to the requirement analysis.Compared with the representative front-end component libraries on the market,the implemented chart component library ‘Recomponents' shows higher availability,which can well meet the demand of Internet products on front-end statistical pages in the Web 4.0.The component library implemented in this paper is easy to be applied to with low intrusiveness to the original project,which can significantly improve the efficiency of front-end development.Using Recomponents in project can provide user with smoother and more natural animation function and interactive experience than other component libraries.The configuration of attributes is similar to native tags,which enhance the code readability.Users can customize charts according to practical application scenarios with the strong component extensibility.