Method, device and equipment for implementing ternary phase diagram based on D3. Js and medium

Abstract

The invention discloses an implementation method, device and equipment of a ternary phase diagram based on D3. Js and a medium. The implementation method comprises the following steps: acquiring a ternary analysis data table based on simulation design of high-purity ethanol; constructing a rectangular coordinate system in a web browser of the ternary phase diagram to be drawn, determining the side length L of the ternary phase diagram based on the size of the web browser, and setting the display length and range of each coordinate axis in a D3. Js library; moving the coordinate axis to obtain an equilateral component triangle with the side length of L; determining a rectangular coordinate of each component data in an equilateral component triangle according to the ternary analysis data table, and drawing a component residual curve; and confirming component coordinate points in the ternary phase diagram coordinate system according to the real pixel position of any point in the equilateral component triangle. According to the method, the ternary phase diagram can be drawn on a two-dimensional plane, conversion of points, lines and planes is supported, and the relation among three components can be observed more conveniently.

Description

Technical Field

[0001] The present invention belongs to the field of simulation analysis of ethanol production process, and specifically relates to a method, device, equipment and medium for realizing a ternary phase diagram based on D3.js. Background Art

[0002] In actual industrial application scenarios, ternary phase diagrams are often used in fields such as chemical engineering, materials science, and metallurgy to visualize the phase behavior of a mixture of three components under different conditions. For example, azeotropic distillation, extractive distillation, and evaluation of separation schemes are inseparable from the drawing of ternary phase diagrams; the correct interpretation of ternary phase diagrams can not only assist us in selecting appropriate process routes, but also help us with quantitative calculations in process simulations; taking ethanol-water as an example, ethanol-water cannot obtain high-purity ethanol through general distillation methods, because the two have an azeotropic point of 78.1°C at 1 bar, and the azeotropic composition is 95% (wt%) ethanol. Therefore, the industry uses azeotropic distillation to obtain high-purity ethanol. When a new substance (such as cyclohexane entrainer) is introduced into the system, the binary phase diagram becomes a ternary phase diagram.

[0003] Drawing a ternary phase diagram can visualize complex ternary system data and more clearly show the changes and relationships in the phase diagram. In addition, by analyzing and mining the ternary phase diagram, we can discover the hidden laws and trends in it, providing a basis for scientific research. At the same time, in complex multi-component compound systems, rationally designing experimental schemes and optimizing processes are one of the challenges faced in research and engineering. The visualization of the ternary phase diagram can help scientists rationally design experiments and optimize process parameters.

[0004] With the vigorous development of society, various simulation software emerges in an endless stream; and the simulation software architecture usually includes three parts: pre-processing, simulation calculation and post-processing. The present invention is the post-processing part: in the development of simulation software, the ternary phase diagram is correctly drawn in combination with the results of thermodynamic calculations; in order to meet the needs and usage habits of different users, the simulation software needs to have good cross-platform and portability. This includes not only compatibility on different operating systems, but also performance on different hardware configurations. The current existing technology cannot meet the requirements of drawing ternary phase diagrams in the development of web page interactive interfaces; in addition, in the existing technical solutions, it is possible to draw the ternary coordinate system and its data in a rectangular coordinate system, but it is impossible to draw the ternary phase diagram coordinate system of an equilateral triangle; to a certain extent, engineers cannot obtain the optimal data and routes conveniently and quickly through their rectangular coordinate system.

[0005] Among the existing JavaScript chart libraries, such as Highcharts, Chart.js and other JavaScript chart libraries, ternary phase diagrams can also be drawn, but other libraries need to be used to assist. For example, Higcharts needs to use the Highcharts-3D library, and the implemented ternary phase diagram is in 3D mode, which cannot meet the needs of implementing ternary phase diagrams on a 2D plane. If you use libraries such as Matplotlib or Plotly to draw ternary phase diagrams. For the Matplotlib library, it is mainly used to generate static images, with poor interactivity, and is not suitable for application scenarios that require dynamic interaction; at the same time, for complex charts, configuration and customization may require more code and time; in addition, when processing large amounts of data or requiring real-time updates, the performance may not be as good as solutions based on Web technology. Plotly needs to rely on JavaScript libraries, which may require additional settings for pure Python environments, and may encounter performance bottlenecks when processing very large data sets.

[0006] In the actual application scenario of azeotropic distillation, it is necessary to observe the distillation area through the residual curve drawn between the three components, the ternary mixing rule and other information, and at the same time, different distillation areas can be divided to obtain the products contained in this area; in the prior art, the scatter plot function of D3.js can be used to draw a ternary phase diagram by converting the ternary data into points in a two-dimensional coordinate system. Typically, this involves converting the ternary data (A, B, C) into coordinates (x, y) on a two-dimensional plane and drawing these points within an equilateral triangle. Since the scatter plot is essentially two-dimensional, it is difficult to intuitively represent the phase boundaries and regions in the ternary phase diagram. In addition, the scatter plot cannot effectively display the continuous phase change area in the phase diagram, especially when contour lines or phase boundaries need to be displayed. Summary of the invention

[0007] In view of the above problems, the present invention proposes a method, device, equipment and medium for realizing a ternary phase diagram based on D3.js. In order to solve the above technical problems, the technical solutions adopted by the present invention are as follows:

[0008] A method for implementing a ternary phase diagram based on D3.js includes the following steps:

[0009] S1, using the industrial process simulation design platform to make a simulation design based on ethanol, water and cyclohexane to obtain high-purity ethanol, and obtain a ternary analysis data table;

[0010] S2, constructing a rectangular coordinate system in the web browser where the ternary phase diagram is to be drawn, determining the side length L of the ternary phase diagram based on the size of the web browser, and setting the display length and range of each coordinate axis in the D3.js library;

[0011] S3, moving the coordinate axis obtained in step S2 to obtain an equilateral component triangle with a side length of L;

[0012] S4, according to the ternary analysis data table obtained in step S1, confirming the rectangular coordinates of each component data in the equilateral component triangle obtained in step S3 and drawing a component residual curve;

[0013] S5, confirming the component coordinates in the ternary phase diagram coordinate system according to the true pixel position of any point within the equilateral component triangle.

[0014] In step S4, the method for confirming the rectangular coordinates is as follows:

[0015] Set any component data in the ternary analysis data table as (D x ,D y ,D z ),

[0016] When D x ≠D y When , the calculation formula of the rectangular coordinates of the point corresponding to the component data is:

[0017]

[0018] Where R represents the interior angle of an equilateral triangle. and are the rectangular abscissa and rectangular ordinate of the point corresponding to the component data respectively;

[0019] When D x ≠D y When , the calculation formula of the rectangular coordinates of the point corresponding to the component data is:

[0020]

[0021]

[0022] In step S5, the method for confirming the component coordinate points in the ternary phase diagram coordinate system is as follows:

[0023] When a component coordinate point is point A and its rectangular horizontal coordinate When the component coordinates of point A are (A x ,A y ,1-A x -A y ),in,

[0024] A x =A y ;

[0025]

[0026] Where R represents the interior angle of an equilateral triangle. is the rectangular ordinate of the component coordinate point;

[0027] When a component coordinate point is point B and its rectangular coordinate When the component coordinate value of point B is (B x ,B y ,1-B x -B y ),in,

[0028]

[0029] When a component coordinate point is point C and its rectangular coordinate When the component coordinate value of point C is (C x ,C y ,1-C x -C y ),

[0030]

[0031] The step S3 comprises the following steps:

[0032] S3.1, translate the X-axis constructed in step S2 downward by H, and the Y-axis to the right Z axis translation to the left Wherein, L represents the side length of the ternary phase diagram, and H represents the height of the ternary phase diagram;

[0033] S3.2, calculating the rotation angle according to the trigonometric function theorem, and rotating the translated Y axis and Z axis according to the obtained rotation angle to obtain an equilateral component triangle with a side length of L;

[0034] The calculation formula for the rotation angle is:

[0035]

[0036] In the formula, Math.atan is a JavaScript built-in function, Math.PI is pi, and δ represents the tangent value of the rotation angle.

[0037] A device for realizing a ternary phase diagram based on D3.js, comprising:

[0038] Data table acquisition module: used to use the industrial process simulation design platform to make a simulation design based on ethanol, water and cyclohexane to obtain high-purity ethanol, and obtain a ternary analysis data table;

[0039] Coordinate system construction module: used to construct a rectangular coordinate system in the web browser where the ternary phase diagram is to be drawn, determine the side length L of the ternary phase diagram based on the size of the web browser, and set the display length and range of each coordinate axis in the D3.js library;

[0040] An equilateral component triangle acquisition module is used to move the coordinate axis established by the coordinate system construction module to obtain an equilateral component triangle with a side length of L;

[0041] Residual curve acquisition module: used to confirm the rectangular coordinates of each component data in the equilateral component triangle obtained by the equilateral component triangle acquisition module according to the ternary analysis data table obtained by the data table acquisition module, and draw the component residual curve;

[0042] Component coordinate calculation module: used to confirm the component coordinates in the ternary phase diagram coordinate system according to the real pixel position of any point in the equilateral component triangle obtained by the residual curve acquisition module in the web browser.

[0043] An electronic device comprises a processor and a memory, wherein the memory stores a computer program, and when the computer program is executed by the processor, the steps of the method for implementing a ternary phase diagram based on D3.js as described above are performed.

[0044] A computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the method for implementing a ternary phase diagram based on D3.js as described above are performed.

[0045] Beneficial effects of the present invention:

[0046] 1. Only the D3.js library is needed to draw the ternary phase diagram on a two-dimensional plane. It also supports the conversion of points, lines, and surfaces, making it easier to observe the relationship between the three different elements and better meet research needs.

[0047] 2. Mainly involves data visualization and interactivity. In contrast, this application can provide a high degree of interactivity and flexibility, and is particularly suitable for application scenarios that require display and interaction in a Web environment;

[0048] 3. Currently, d3.js is widely used and can interact well with other languages. It can run on multiple browsers and devices, including PCs, mobile phones, and tablets. In actual application scenarios, it greatly reduces the requirements of engineers for equipment. At the same time, engineers can select the appropriate process route by observing the ternary phase diagram of the equilateral triangle and complete quantitative calculations in the simulation process. BRIEF DESCRIPTION OF THE DRAWINGS

[0049] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0050] Figure 1 A schematic diagram of the process of drawing equilateral component triangles;

[0051] Figure 2 A schematic diagram of the rectangular coordinate range of any point in an equilateral triangle;

[0052] Figure 3 is the rectangular coordinate of point A in step S5 Schematic diagram of the calculation of the component coordinates of point A when ;

[0053] Figure 4 is the rectangular coordinate of point B in step S5 Schematic diagram of the calculation of the component coordinates of point B when ;

[0054] Figure 5 is the rectangular coordinate of point C in step S5 Schematic diagram of the calculation of the component coordinates of point C when ;

[0055] Figure 6 is the value of D in step S4 x =D y Schematic diagram of rectangular coordinate calculation at time point D;

[0056] Figure 7 is the value of D in step S4 x ≠D y Schematic diagram of rectangular coordinate calculation of time point P;

[0057] Figure 8 This is a schematic diagram of the component residue curve during the production process of high-concentration ethanol. DETAILED DESCRIPTION

[0058] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0059] JavaScript: It is a lightweight, interpreted or just-in-time compiled programming language with function priority. It is a dynamic scripting language based on prototype programming and multiple paradigms, and supports object-oriented, imperative, declarative, and functional programming paradigms.

[0060] D3.js: (Data-Driven Documents) is a JavaScript library for data visualization that is dedicated to transforming data into interactive visualization charts through HTML, SVG, and CSS.

[0061] Math.atan: A JavaScript built-in function that calculates the inverse tangent, also known as the inverse sine. This function returns a value between -pi / 2 and pi / 2 that represents the angle corresponding to the specified value. This function is often used to solve problems involving trigonometric functions, such as finding the sine, cosine, or tangent of an angle.

[0062] Math.PI: Used in JavaScript to calculate the circumference and area of ​​a circle, as well as the conversion between angles and radians.

[0063] Ternary phase diagram: It plays an important role in materials science. It is mainly used to describe and analyze the phase equilibrium relationship of a system composed of three components. It can help understand the interaction and equilibrium relationship between different alloy elements, thereby optimizing the performance of the alloy. The ternary phase diagram is a barycentric diagram that describes the sum of three variables as a constant. An equilateral triangle is used to represent a ternary coordinate system, and each vertex corresponds to a variable (or a component). The equilateral triangle has the following two properties:

[0064] (1) The sum of the distances from any point in an equilateral triangle to the three sides of the triangle is equal to the height of the equilateral triangle;

[0065] (2) Draw parallel lines through any point of an equilateral triangle to the three sides (either clockwise or counterclockwise) and read the line segments intercepted by the parallel lines on each side. The sum of these three line segments should be equal to the side length of the equilateral triangle.

[0066] A method for implementing a ternary phase diagram based on D3.js includes the following steps:

[0067] S1, using the industrial process simulation design platform to make a simulation design based on ethanol, water and cyclohexane to obtain high-purity ethanol, and obtain a ternary analysis data table;

[0068] This application uses the Advanced Process Engineering eXpert (APEX) platform-thermodynamic tool of SPC, and uses ethanol (C2H6O), water (H2O) and cyclohexane (C6H12) respectively. The thermodynamic method is selected as PR (Peng-Robinson equation, PR equation, Peng-Robinson equation), the effective phase is gas-liquid, 1.01325bar, and the temperature unit is degrees Celsius. The residual curve compositions of the three components are set to 0.5, 0.4, and 0.1 respectively; the calculation is run to obtain the ternary analysis data table shown in Table 1 below, and the specific data are shown in Table 1, and then the ternary phase diagram is drawn according to the method of this application. In this embodiment, the purity level of the high-purity ethanol includes 95%, 99%, 99.5%, 99.9%, 99.95% or 99.99%, which can be set according to different industrial scenarios.

[0069]

[0070]

[0071]

[0072]

[0073] S2, constructing a rectangular coordinate system in the web browser where the ternary phase diagram is to be drawn, determining the side length L of the ternary phase diagram based on the size of the web browser, and setting the display length and range of each coordinate axis in the D3.js library;

[0074] The main purpose of this application is to depict the composition of a ternary mixture distilled under total reflux conditions over time. The three sides of the equilateral composition triangle in the ternary phase diagram represent C2H6O, H2O and C6H 12 , the coordinate range of the three side axes is [0,1], and they are arranged in a counterclockwise direction according to the scale number.

[0075] The lengths of the three sides of the ternary phase diagram are determined according to the size of the web browser. The minimum value of the width and height of the web browser is selected as the side length L of the ternary phase diagram. The corresponding formula is:

[0076]

[0077] In the formula, Represents the width of the web browser. The embodiment of the present application sets the height of the web browser to the minimum value.

[0078] According to the three-side length rule of a right triangle, the height of the ternary phase diagram, that is, the height of the equilateral component triangle, is calculated. The corresponding formula is:

[0079]

[0080] The D3.js library provides the d3.axisBottom, d3.axisLeft, and d3.axisRight functions for drawing the three coordinate systems X, Y, and Z of the ternary phase diagram, but these three coordinate systems are vertical by default, such as Figure 1 In this embodiment, the X axis is drawn in the direction of the width of the web browser, and the Y axis and the Z axis are drawn in the direction of the height of the web browser.

[0081] Use the d3.scaleLinear() function in the D3.js library to define the X, Y, and Z scales, that is, the actual display length and range of the coordinate axis. The setting rules are shown in Table 2 below.

[0082] Table 2

[0083]

[0084] S3, moving the coordinate axis obtained in step S2 to obtain an equilateral component triangle with a side length of L, including the following steps:

[0085] S3.1, such as Figure 1 As shown in ② and ③, move the X axis downward by H and the Y axis to the right Z axis translation to the left

[0086] The function settings are shown in Table 3 below:

[0087] Table 3

[0088]

[0089] S3.2, calculating the rotation angle according to the trigonometric function theorem, and rotating the translated Y axis and Z axis according to the obtained rotation angle to obtain an equilateral component triangle with a side length of L;

[0090] The calculation formula for the rotation angle is:

[0091]

[0092] Where Math.atan is a JavaScript built-in function used to calculate the inverse tangent value, also known as the inverse sine value, Math.PI is pi, and δ represents the tangent value of the rotation angle.

[0093] According to the trigonometric theorem, the calculation formula of the tangent value δ of the rotation angle, that is, the tan value, is:

[0094]

[0095] According to the calculated rotation angle, rotate the Y and Z axes, such as Figure 1 As shown in ④, we get Figure 1 The equilateral triangle shown in ⑤. This application uses JavaScript built-in functions to obtain the rotation angle, which can accurately obtain the pixel angle and avoid inaccurate angles caused by web page scaling, thereby affecting the calculation of triangular coordinate system points, lines, etc. The function settings in the platform are shown in Table 4 below:

[0096] Table 4

[0097] Coordinate Axes Rotation Settings Y <![CDATA[d3.attr('transform','rotate('+ε rotate +')')]]> Z <![CDATA[d3.attr('transform','rotate('+ε rotate +')')]]>

[0098] S4, according to the ternary analysis data table obtained in step S1, drawing in the equilateral component triangle obtained in step S3 to obtain a component residual curve;

[0099] A very important concept in the ternary phase diagram is the residual curve: the residual curve has a direction, and all residual curves start from the lightest component and move toward the heaviest component. It is also the direction of temperature increase. The starting point corresponds to the point with the lowest boiling point in the region, which is called the unstable point; the end point corresponds to the point with the highest boiling point in the region, which is called the stable point; one of the special residual curves divides the triangle into two distillation regions, which is called the distillation boundary line. The residual curves will neither intersect nor cross the distillation boundary line. All residual curves in each distillation region start from the same starting point and end at the same end point.

[0100] Although the ternary phase diagram in this application is presented as three coordinate axes, in fact only the X and Y axes are the main ones. That is, when the rectangular coordinate point of the X axis and the rectangular coordinate point of the Y axis are known in the coordinate system, the pixel position corresponding to any point in the equilateral component triangle, that is, any ternary alloy (x, y, z) can be accurately depicted.

[0101] Assume that a set of component data in the ternary analysis data table is (D x ,D y ,D z ), we need to obtain the corresponding rectangular coordinates according to the component data. According to the calculated rectangular coordinates, any internal point in the equilateral component triangle can be marked. Assume that the component data is (D x ,D y ,D z ) The rectangular coordinates of the X-axis and Y-axis of the point corresponding to Indicates that the conversion method between component data and rectangular coordinates is:

[0102] When D x =D y When Figure 6 As shown, the component data corresponding to point D is (D x ,D y,D z ), draw parallel lines through point D to the three sides of the equilateral triangle, the concentration of H2O component is D x The length represented by the C2H6O component is D y The length represented by C6H 12 The concentration of the component is D z The length represented by the three concentrations is 1. Draw perpendicular lines from point D to the X-axis and Y-axis respectively. The calculation formula for the rectangular coordinates of point D is:

[0103]

[0104] Where R represents the interior angle of the equilateral triangle.

[0105] When D x ≠D y When Figure 7 As shown, the component data corresponding to point P is (D x ,D y ,D z ), draw parallel lines through point P to the three sides of the equilateral triangles, and intersect them with the three sides of the equilateral triangles to get P x , P y and P z At three points, the concentration of H2O is P x The length represented is D x , the concentration of C2H6O component is P y The length represented is D y , C6H 12 The concentration of the component is P z The length represented is D z , and the sum of the three concentrations is 1. Draw points P and P in the direction of the X axis. y The extension line of yx , while along P y Draw a perpendicular line to the side representing H2O concentration to get points P1, P y The straight line formed by the two points P and P1 and the rectangular coordinate point of point P The resulting straight lines intersect to obtain P o , along P y Draw a perpendicular line to the Y axis to get point P y2 ,get:

[0106]

[0107] In the formula, Represents the distance between the coordinate origin O and point P1, Indicates point P y The distance to point P1, Indicates point P o To point P y The distance between.

[0108] According to formula (7), formula (8) and formula (9), the calculation formula of the rectangular coordinates of point P is:

[0109]

[0110] Substituting all the component data in the ternary analysis data table in step S1 into formula (10) and formula (11) respectively, the rectangular coordinates of each group of component data can be obtained. The corresponding pixel points can be plotted according to the obtained rectangular coordinates, and then the following can be obtained according to the pixel points: Figure 8 The compositional remainder curve is shown.

[0111] S5, confirming the component coordinate point in the ternary phase diagram coordinate system according to the real pixel position of any point in the equilateral component triangle in the web browser, comprising the following steps:

[0112] S5.1, obtaining the real pixel position of any point in the equilateral component triangle through a JavaScript native method, and converting each pixel point in the equilateral component triangle into a rectangular coordinate point based on the pixel position;

[0113] like Figure 2 As shown, draw straight lines parallel to the X-axis and Y-axis from the vertices of the equilateral triangles. According to the characteristics of the rectangle, the rectangular coordinate range of any point in the equilateral triangle and on the side of the equilateral triangle can be obtained. Assume that the rectangular coordinates of any point M are Indicates that At the same time, according to the characteristics of equilateral triangles and right triangles, the tan value, cos value and sin value of ∠R can be obtained.

[0114] In order to draw the ternary phase diagram of each component in the production process of high-purity ethanol, it is also necessary to convert each pixel point in the equilateral component triangle into a rectangular coordinate point. The real pixel position of any point in the equilateral component triangle, that is, the offset of the point in the web browser, is obtained through the native JavaScript method. and Indicates that the calculation formula for rectangular coordinates is:

[0115]

[0116] S5.2, converting the rectangular coordinate point obtained in step S5.1 into a component coordinate point in the ternary phase diagram coordinate system;

[0117] like Figure 3 As shown, when the rectangular coordinates of point A When the point is located on the central axis of the side of the equilateral component triangle representing the H2O concentration, parallel lines are drawn through point A to the three sides of the equilateral component triangle. According to the intersection of the parallel lines and the characteristics of the ternary phase diagram, the concentration of the H2O component is A. x The length represented by the C2H6O component is A y The length represented by C6H 12 The concentration of the component is A z The length represented by the three concentrations is 1, so the component coordinate value of point A is (A x ,A y ,1-A x -A y ). At the same time, according to Figure 3 You can get:

[0118]

[0119] A x =A y ; (15)

[0120] According to formula (14), we can get:

[0121] like Figure 4 As shown, when the rectangular coordinates of point B When , draw parallel lines through point B to the three sides of the equilateral triangle. According to the intersection of the parallel lines and the characteristics of the ternary phase diagram, the concentration of the H2O component is B. x The length represented by the C2H6O component is B y The length represented by C6H 12 The concentration of component B z The length represented by the three concentrations is 1, so the component coordinate value of point B is (B x ,B y ,1-B x -B y ). At the same time, according to Figure 4 You can get:

[0122]

[0123] By transforming formula (16), we can get:

[0124] Make points B and B y The extension line of yx ,get:

[0125]

[0126] Along B y Draw a perpendicular line to the edge representing the H2O concentration, and we get:

[0127]

[0128] According to formula (17), formula (18) and formula (19), we can get:

[0129]

[0130] like Figure 5 As shown, when the rectangular coordinates of point C When , draw parallel lines through point C to the three sides of the equilateral triangle. According to the intersection of the parallel lines and the characteristics of the ternary phase diagram, the concentration of the H2O component is C x The length represented by the C2H6O component is C y The length represented by C6H 12 The concentration of the component is C z The length represented by the three concentrations is 1, so the component coordinate value of point C is (C x ,C y ,1-C x -C y ). At the same time, according to Figure 5 You can get:

[0131]

[0132] By transforming formula (14), we can get:

[0133] Make points C and C y The extension line of yx ,get:

[0134]

[0135] Along C y Draw a perpendicular line to the edge representing the H2O concentration, and we get:

[0136]

[0137] According to formula (22), formula (23) and formula (24), we can get:

[0138]

[0139] Through step S5, the ternary coordinate point corresponding to any point in the ternary coordinate system can be displayed. When the user wants to know which data the point on the line corresponds to, he only needs to place the mouse on the line to obtain the coordinate value of the current point.

[0140] Utilize the powerful interactive function of D3.js, allow users to perform dynamic operations on the chart, such as zooming, panning, hovering to display detailed information, selecting specific areas, etc. In some industrial applications, data may change in real time, and traditional chart tools are difficult to quickly update and display. This application can realize real-time updating of charts through data binding and DOM (Document Object Model, document object type) update mechanism, adapting to dynamic data environment. With the popularity of Web applications, how to efficiently display complex ternary phase diagrams in browsers has become a challenge. D3.js is a JavaScript-based library that is naturally suitable for Web environments, can be seamlessly integrated into Web applications, and supports cross-platform access. When processing large-scale data sets, traditional tools may face performance bottlenecks. D3.js can effectively process and display large-scale data sets through selective rendering and data binding technology. By solving these technical problems, the ternary phase diagram drawing method based on D3.js can provide users with a powerful, flexible and easy-to-integrate visualization tool, which is particularly suitable for industrial application scenarios that need to perform complex data analysis in a Web environment.

[0141] The embodiment of the present application also provides a device for implementing a ternary phase diagram based on D3.js, including:

[0142] Data table acquisition module: used to make a simulation design based on ethanol, water and cyclohexane to obtain high-purity ethanol based on the industrial process simulation design platform, and generate a ternary analysis data table;

[0143] Coordinate system construction module: used to construct a rectangular coordinate system in the web browser where the ternary phase diagram is to be drawn, determine the side length L of the ternary phase diagram based on the size of the web browser, and set the display length and range of each coordinate axis in the D3.js library;

[0144] An equilateral component triangle acquisition module is used to move the coordinate axis established by the coordinate system construction module to generate an equilateral component triangle with a side length of L;

[0145] Residual curve acquisition module: used for confirming the rectangular coordinates of each component data in the equilateral component triangle obtained by the equilateral component triangle acquisition module according to the ternary analysis data table obtained by the data table acquisition module, so as to draw the component residual curve;

[0146] Component coordinate calculation module: used to confirm the component coordinate point in the ternary phase diagram coordinate system according to the real pixel position of any point in the equilateral component triangle obtained by the remaining curve acquisition module in the web browsing.

[0147] An embodiment of the present application further provides an electronic device, comprising a processor and a memory, wherein the memory stores a computer program, and when the computer program is executed by the processor, the steps of the above-mentioned method for implementing the ternary phase diagram based on D3.js are executed.

[0148] The embodiment of the present application also provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the steps of the above-mentioned method for implementing the ternary phase diagram based on D3.js are executed. Specifically, the storage medium can be a general storage medium, such as a mobile disk, a hard disk, etc. When the computer program on the storage medium is run, the embodiment of the above-mentioned method for implementing the ternary phase diagram based on D3.js can be executed.

[0149] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. A method for implementing a ternary phase diagram based on D3.js, characterized in that: The steps include: S1, using the industrial process simulation design platform to make a simulation design based on ethanol, water and cyclohexane to obtain high-purity ethanol, and obtain a ternary analysis data table; S2, constructing a rectangular coordinate system in the web browser where the ternary phase diagram is to be drawn, determining the side length L of the ternary phase diagram based on the size of the web browser, and setting the display length and range of each coordinate axis in the D3.js library; S3, moving the coordinate axis obtained in step S2 to obtain an equilateral component triangle with a side length of L; S4, according to the ternary analysis data table obtained in step S1, confirming the rectangular coordinates of each component data in the equilateral component triangle obtained in step S3 and drawing a component residual curve; S5, confirming the component coordinates in the ternary phase diagram coordinate system according to the true pixel position of any point within the equilateral component triangle.

2. The method for implementing a ternary phase diagram based on D3.js according to claim 1, characterized in that: In step S4, the method for confirming the rectangular coordinates is as follows: Set any component data in the ternary analysis data table as (D x ,D y ,D z ), When D x ≠D y When , the calculation formula of the rectangular coordinates of the point corresponding to the component data is: Where R represents the interior angle of an equilateral triangle. and are the rectangular abscissa and rectangular ordinate of the point corresponding to the component data respectively; When D x ≠D y When , the calculation formula of the rectangular coordinates of the point corresponding to the component data is:

3. The method for implementing a ternary phase diagram based on D3.js according to claim 1, characterized in that: In step S5, the method for confirming the component coordinates in the ternary phase diagram coordinate system is as follows: When a component coordinate point is point A and its rectangular horizontal coordinate When the component coordinates of point A are (A x ,A y ,1-A x -A y ),in, A x =A y ; Where R represents the interior angle of an equilateral triangle. is the rectangular ordinate of the component coordinate point; When a component coordinate point is point B and its rectangular coordinate When the component coordinate value of point B is (B x ,B y ,1-B x -B y ),in, When a component coordinate point is point C and its rectangular coordinate When the component coordinate value of point C is (C x ,C y ,1-C x -C y ), 4. The method for implementing a ternary phase diagram based on D3.js according to claim 1, characterized in that: The step S3 comprises the following steps: S3.1, translate the X-axis constructed in step S2 downward by H, and the Y-axis to the right Z axis translation to the left Wherein, L represents the side length of the ternary phase diagram, and H represents the height of the ternary phase diagram; S3.2, calculating the rotation angle according to the trigonometric function theorem, and rotating the translated Y axis and Z axis according to the obtained rotation angle to obtain an equilateral component triangle with a side length of L; The calculation formula for the rotation angle is: In the formula, Math.atan is a JavaScript built-in function, Math.PI is pi, and δ represents the tangent value of the rotation angle.

5. A device for realizing a ternary phase diagram based on D3.js, characterized in that: include: Data table acquisition module: used to use the industrial process simulation design platform to make a simulation design based on ethanol, water and cyclohexane to obtain high-purity ethanol, and obtain a ternary analysis data table; Coordinate system construction module: used to construct a rectangular coordinate system in the web browser where the ternary phase diagram is to be drawn, determine the side length L of the ternary phase diagram based on the size of the web browser, and set the display length and range of each coordinate axis in the D3.js library; An equilateral component triangle acquisition module is used to move the coordinate axis established by the coordinate system construction module to obtain an equilateral component triangle with a side length of L; Residual curve acquisition module: used to confirm the rectangular coordinates of each component data in the equilateral component triangle obtained by the equilateral component triangle acquisition module according to the ternary analysis data table obtained by the data table acquisition module, and draw the component residual curve; Component coordinate calculation module: used to confirm the component coordinates in the ternary phase diagram coordinate system according to the real pixel position of any point in the equilateral component triangle obtained by the residual curve acquisition module in the web browser.

6. An electronic device, comprising a processor and a memory, characterized in that: The memory stores a computer program, and when the computer program is executed by the processor, the steps of the method for implementing the ternary phase diagram based on D3.js as claimed in any one of claims 1 to 4 are performed.

7. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method for implementing a ternary phase diagram based on D3.js as described in any one of claims 1 to 4 are performed.

Images