Implementation method and device of ternary phase diagram based on D3.js, equipment and medium

Abstract

The application discloses an implementation method and device of a ternary phase diagram based on D3.js, equipment and a medium, comprising: obtaining a ternary analysis data table based on the simulation design of high-purity ethanol; constructing a rectangular coordinate system in a web browser to be drawn a ternary phase diagram, 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; moving the coordinate axis to obtain an equilateral component triangle with a side length L; drawing a component residual curve according to the rectangular coordinates of each component data in the equilateral component triangle confirmed by the ternary analysis data table; and 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. The application can draw a ternary phase diagram on a two-dimensional plane, support the conversion of points, lines and surfaces, and more conveniently observe the relationship among three components.

Description

TECHNICAL FIELD

[0001] The application belongs to the field of simulation analysis of ethanol production process, and particularly relates to a ternary phase diagram implementation method, device, equipment and medium based on D3.js. BACKGROUND

[0002] In actual industrial application scenarios, ternary phase diagrams are often used in the fields of chemical engineering, material science and metallurgy to visualize the phase behavior of mixtures of three components under different conditions. For example, the drawing of ternary phase diagrams is indispensable in azeotropic distillation, extractive distillation and evaluation of separation schemes; correct interpretation of ternary phase diagrams can not only help us choose the appropriate process route, but also help us quantitatively calculate in process simulation; taking ethanol-water as an example, high-purity ethanol cannot be obtained by general distillation of ethanol-water, because they have azeotropic point of 78.1℃ at 1 bar and azeotropic composition of 95% (wt%) ethanol. Therefore, the method of azeotropic distillation is used in industry to obtain high-purity ethanol, and when a new substance (such as cyclohexane azeotrope) 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 mutual relationships in the phase diagram. In addition, through analysis and mining of the ternary phase diagram, hidden rules and trends can be found, providing a basis for scientific research. At the same time, in complex multi-component compound systems, reasonable design of experimental schemes and optimization of processes are one of the challenges faced in research and engineering, and the visualization of ternary phase diagrams can help scientists reasonably design experiments and optimize process parameters.

[0004] In the context of 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 application is the post-processing part: in the development of simulation software, the ternary phase diagram is correctly drawn in combination with the thermodynamic calculation results; in order to meet the needs and usage habits of different users, the simulation software needs to have good cross-platform and portability. This not only includes compatibility on different operating systems, but also includes performance on different hardware configurations. The current prior art cannot meet the needs of the development of ternary phase diagram drawing in web interactive interface; in addition, the existing technical solutions can realize the drawing of ternary coordinate system and its data in the rectangular coordinate system, but cannot realize the drawing of the ternary phase diagram coordinate system in the equilateral triangle; to some extent, engineers cannot conveniently and quickly obtain the optimal data and route through the rectangular coordinate system.

[0005] The existing JavaScript chart libraries, such as Highcharts, Chart.js and the like, can also realize the drawing of ternary phase diagrams, but need to use other libraries for assistance, such as Highcharts-3D library for Highcharts, and the ternary phase diagram realized is in 3D mode, which cannot meet the demand of realizing ternary phase diagram on a 2D plane. If Matplotlib or Plotly and the like are used to draw ternary phase diagrams. For the Matplotlib library, it is mainly used to generate static images, and the interactivity is poor, and is not suitable for application scenarios requiring dynamic interaction; meanwhile, for complex charts, configuration and customization may need more code and time; in addition, when a large amount of data is processed or needs to be updated in real time, the performance may not be as good as that of a solution based on web technology. Plotly needs to depend on a JavaScript library, and for a pure Python environment, additional settings may be needed, and when a very large-scale data set is processed, a performance bottleneck may be encountered.

[0006] In the actual application scenario of azeotropic distillation, the distillation region needs to be observed through the residual curve drawn among the three components, the ternary mixture rule and the like, and different distillation regions can be divided to obtain the products contained in the region; in the prior art, the scatter plot function of D3.js can be used to draw a ternary phase diagram by converting ternary data into points in a two-dimensional coordinate system. Usually, this involves converting ternary data (A, B, C) into coordinates (x, y) on a two-dimensional plane, and drawing these points in 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 region in the phase diagram, especially when it is necessary to display contour lines or phase boundaries. SUMMARY

[0007] To solve the above technical problems, the technical solution adopted by the present application is as follows:

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

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

[0010] S2, constructing a rectangular coordinate system in a web browser to be drawn in a ternary phase diagram, 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, confirming the rectangular coordinates of each component data in the equilateral component triangle obtained in step S3 according to the ternary analysis data table obtained in step S1 to draw 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 in the equilateral component triangle.

[0014] In step S4, the confirmation method of the rectangular coordinates is as follows:

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

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

[0017]

[0018] In the formula, R represents the internal angle of the equilateral component triangle, and are the rectangular horizontal coordinates and the rectangular vertical coordinates of the point corresponding to the component data, respectively;

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

[0020]

[0021]

[0022] In step S5, the confirmation method of the component coordinate point in the ternary phase diagram coordinate system is as follows:

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

[0024] A x =A y ;

[0025]

[0026] wherein R represents an internal angle of an equilateral component triangle, is a straight angle ordinate of a component coordinate point;

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

[0028]

[0029] When a component coordinate point is point C and its straight angle coordinate is , 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, translating the X axis downward by H, the Y axis rightward by and the Z axis leftward by 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 theorem, and rotating the translated Y axis and Z axis respectively to obtain an equilateral component triangle with a side length of L according to the obtained rotation angle;

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

[0035]

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

[0037] An implementation device of a ternary phase diagram based on D3.js, comprising:

[0038] A data table acquisition module: used for acquiring a ternary analysis data table by using an industrial process simulation design platform to make a simulation design for obtaining high-purity ethanol based on ethanol, water and cyclohexane;

[0039] A coordinate system construction module is configured to construct a rectangular coordinate system in a web browser for drawing a ternary phase diagram, 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 configured to move the coordinate axes established by the coordinate system construction module to acquire an equilateral component triangle with a side length L.

[0041] A residual curve acquisition module is configured 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 a component residual curve.

[0042] A component coordinate calculation module is configured 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 in the web browser obtained by the residual curve acquisition module.

[0043] An electronic device includes a processor and a memory, and the memory stores a computer program. When the computer program is executed by the processor, the steps of the implementation method of the ternary phase diagram based on D3.js are executed.

[0044] A computer readable storage medium stores a computer program. When the computer program is executed by a processor, the steps of the implementation method of the ternary phase diagram based on D3.js are executed.

[0045] The beneficial effects of the present application are as follows:

[0046] 1. Only the D3.js library is needed to realize the drawing of the ternary phase diagram, and the drawing is performed on a two-dimensional plane, while supporting the conversion of points, lines and surfaces, so that the relationship between three different elements can be observed more conveniently, and the research requirements can be better met.

[0047] 2. The present application mainly relates to data visualization and interactivity. Compared with the prior art, the present application can provide high interactivity and flexibility, and is particularly suitable for application scenarios that need to be displayed and interacted in a Web environment.

[0048] 3. The JavaScript implementation is widely used at present, can interact well with other languages, and can run on various browsers and devices, including PCs, mobile phones and tablet computers. In actual application scenarios, the requirements of engineers on devices are greatly reduced. Meanwhile, engineers can select a suitable process route by observing the ternary phase diagram of the equilateral triangle, and complete quantitative calculation in the simulation process. BRIEF DESCRIPTION OF DRAWINGS

[0049] In order to make the technical solutions in the embodiments of the present application or the prior art clearer, the accompanying drawings needed in the embodiments or the prior art description will be briefly introduced. Obviously, the accompanying drawings in the following description only need to be some embodiments of the present application, and for those skilled in the art, other drawings can be obtained without creative labor.

[0050] Figure 1 Flowchart for drawing equilateral component triangle;

[0051] Figure 2 Diagram for the range of the rectangular coordinates of any point in the equilateral component triangle;

[0052] Figure 3 Diagram for the calculation of the component coordinates of point A in step S5 when the rectangular coordinates of point A are

[0053] Figure 4 Diagram for the calculation of the component coordinates of point B in step S5 when the rectangular coordinates of point B are

[0054] Figure 5 Diagram for the calculation of the component coordinates of point C in step S5 when the rectangular coordinates of point C are

[0055] Figure 6 Diagram for the calculation of the rectangular coordinates of point D in step S4 when D x = D y

[0056] Figure 7 Diagram for the calculation of the rectangular coordinates of point P in step S4 when D x ≠ D y

[0057] Figure 8 Diagram for the component residual curve in the process of high-concentration ethanol production. DETAILED DESCRIPTION

[0058] The technical solutions in the embodiments of the present application will be described clearly and completely with reference to the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only some embodiments of the present application, not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor are within the protection scope of the present application.

[0059] ​​​​​JavaScript: A lightweight, interpreted, or just-in-time compiled programming language with first-class functions, based on prototype-based programming and multi-paradigm dynamic scripting language, and supports object-oriented, imperative, declarative, and functional programming paradigms.

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

[0061] Math.atan: A built-in JavaScript function that calculates the arctangent value, also known as the inverse sine value. This function returns a value between -pi / 2 and pi / 2, representing 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 values of an angle.

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

[0063] Ternary phase diagram: An important tool in materials science, mainly used to describe and analyze the phase equilibrium relationship of a system composed of three components, which can help understand the interaction and balance between different alloy elements, thereby optimizing the performance of alloys. Ternary phase diagram is a center diagram that describes the sum of three variables as a constant. An equilateral triangle represents a ternary coordinate system, with each vertex corresponding 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 the 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 in the equilateral triangle, (whether clockwise or counterclockwise) read the line segments intercepted by the parallel lines on each side, the sum of the three line segments should be equal to the length of the equilateral triangle.

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

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

[0068] The present application uses the Sinocontrol APEX (Advanced Process Engineering eXpert) platform-thermodynamic tool, respectively uses ethanol (C2H6O), water (H2O) and cyclohexane (C6H12), selects the thermodynamic method as P-R (Peng-Robinson equation, P-R equation, Peng-Robinson equation), the effective phase state is gas-liquid, 1.01325 bar, the temperature unit is Celsius, and sets the composition of the three-component residual curve group as 0.5, 0.4 and 0.1 respectively. The ternary analysis data table in Table 1 is obtained by running calculation, and the specific data is shown in Table 1. Then, the ternary phase diagram is drawn according to the method of the present application. In the present embodiment, the purity grade 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 scenes.

[0069]

[0070]

[0071]

[0072]

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

[0074] The main purpose of the present application is to depict the trajectory of the composition of a ternary mixture under total reflux distillation over time. The three edges of the equilateral composition triangle in the ternary phase diagram respectively represent C2H6O, H2O and C6H 12 , the coordinate axis range of the three edges is [0, 1], and the scale numbers are arranged in the counterclockwise direction.

[0075] The three edge lengths of the ternary phase diagram are determined according to the size of the web browser, and 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, width represents the width of the web browser, and the height of the web browser is set as the minimum value in the present embodiment.

[0078] According to the rule of the three edge lengths of a right triangle, the height of the ternary phase diagram, i.e. the height of the equilateral composition triangle, is calculated. The corresponding formula is:

[0079] ​

[0080] The D3.js library provides the functions d3.axisBottom, d3.axisLeft, and d3.axisRight for drawing the three coordinate systems X, Y, and Z of a ternary phase diagram, respectively. However, these three coordinate systems are set to the vertical direction by default. Figure 1 As shown in ①, in this embodiment, the X-axis is drawn along the width direction of the web browser, and the Y-axis and Z-axis are drawn along the height direction of the web browser.

[0081] Use the d3.scaleLinear() function in the D3.js library to define the X, Y, and Z scales, i.e. the actual display length and range of the coordinate axes, and set the rules as shown in Table 2 below.

[0082] Table 2

[0083] Coordinate axes Scale definition X d3.scaleLinear().domain([0,1]).range([0,L])) Y d3.scaleLinear().domain([0,1]).range([L,0])) Z d3.scaleLinear().domain([0,1]).range([L,0]))

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

[0085] S3.1, as Figure 1 As shown in ② and ③, the X-axis is shifted downwards by H, and the Y-axis is shifted to the right. Z-axis translation to the left

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

[0087] Table 3

[0088] Coordinate axes Translation setting X d3.attr('transform','translate('0,'+H+')') Y d3.attr('transform','translate('+1 / 2L+',0)') Z d3.attr('transform','translate('+1 / 2L+',0)')

[0089] S3.2 Calculate the rotation angle according to the trigonometric function theorem, and rotate the translated Y-axis and Z-axis according to the obtained rotation angle to obtain an equilateral component triangle with side length l;

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

[0091]

[0092] In the formula, Math.atan is a built-in JavaScript function used to calculate the arctangent 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 function theorem, the formula for calculating the tangent value δ of the rotation angle, which is also the tan value, is:

[0094]

[0095] According to the calculated rotation angle, the Y and Z axes are rotated, as shown in Figure 1 , to obtain an equilateral composition triangle shown in Figure 1 . The present application uses the built-in function of JavaScript to obtain the rotation angle, which can accurately obtain the pixel angle, avoiding the inaccuracy of the angle caused by the stretching of the webpage, thereby affecting the calculation of the triangle coordinate system points, lines, etc. The function setting in the platform is shown in Table 4:

[0096] Table 4

[0097] Coordinate axes Rotation setting Y [d3.attr('transform','rotate('+ε rotate +')')]]> Z [d3.attr('transform','rotate('+ε rotate +')')]]>

[0098] S4, the ternary analysis data table obtained in step S1 is plotted in the equilateral composition triangle obtained in step S3, and a composition residual curve is obtained;

[0099] There is a very important concept in the ternary phase diagram, which is the residual curve: the residual curve has a direction, and all the residual curves start from the lightest component and move towards the heaviest component. At the same time, it is also the direction of temperature rise, 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 special residual curve divides the triangle into two distillation regions, which is called the rectification boundary line. The residual curve neither intersects nor crosses the rectification boundary line, and all the residual curves in each rectification region start from the same starting point and end at the same end point.

[0100] Although the ternary phase diagram in the present application appears to have three coordinate axes, in fact, only the X and Y axes are used, that is, when the straight angle coordinate point of the X axis and the straight angle coordinate point of the Y axis in the coordinate are known, the pixel position corresponding to any point in the equilateral composition triangle, that is, any ternary alloy (x, y, z), can be accurately plotted.

[0101] Suppose a set of composition data in the ternary analysis data table is (D x , D y , D z ), and the corresponding straight angle coordinates need to be obtained according to the composition data. According to the calculated straight angle coordinates, any internal point in the equilateral composition triangle can be marked. Suppose the composition data (D x , D y , D z ) corresponds to the straight angle coordinates of the X axis and the Y axis of the point D , and the conversion method of the composition data and the straight angle coordinates is:

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

[0103]

[0104] In the formula, R represents the interior angle of an equilateral component triangle.

[0105] When D x ≠D y At times, such as Figure 7 As shown, the component data corresponding to point P is (D x D y D z Draw lines parallel to the three sides of the equilateral triangle from point P, intersecting the three sides of the equilateral triangle to obtain point P. x P y and P z At three points, the concentration of component H2O is P. x The length represented is D. x The concentration of component C2H6O is P. y The length represented is D. y C6H 12 The concentration of component P z The length represented is D. z And the sum of the concentrations of the three is 1. Draw points P1 and P2 along the X-axis. y The extension of the line intersects at point P. yx At the same time along P y Draw a perpendicular line to the side representing the H2O concentration to obtain point P1, P y The straight line formed by points P1 and P2 intersects the rectangular coordinates of points P and P3. The intersecting lines formed by these lines yield p o Along P y Draw a perpendicular line to the Y-axis to obtain point P. y2 ,get:

[0106]

[0107] In the formula, This represents the distance between the origin O and point P1. Point P y The distance to point P1 Point P o Point P y The distance between them.

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

[0109]

[0110] Substituting all component data from the ternary analysis data table in step S1 into formulas (10) and (11) respectively, we can obtain the rectangular coordinates of each component data. Based on the obtained rectangular coordinates, we can draw the corresponding pixel points, and then obtain the following from the pixel points: Figure 8 The component residual curve shown.

[0111] S5. Determine the composition coordinate points in the ternary phase diagram coordinate system based on the actual pixel position of any point inside the equilateral composition triangle in the web browser, including the following steps:

[0112] S5.1 uses native JavaScript methods to obtain the actual pixel position of any point within an equilateral triangle, and converts each pixel within the equilateral triangle into a Cartesian coordinate point based on this 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 triangle. Based on the properties of a rectangle, the range of rectangular coordinates for any point inside and on the sides of the equilateral triangle can be obtained. Assume the rectangular coordinates of any point M are... Indicate, then Furthermore, based on the properties of equilateral and right triangles, the tan, cos, and sin values ​​of ∠R can be obtained.

[0114] To draw the ternary phase diagram of each component in the high-purity ethanol production process, it is necessary to convert each pixel within the equilateral component triangle into Cartesian coordinates. This is achieved by using native JavaScript methods to obtain the actual pixel position of any point within the equilateral component triangle, i.e., the offset of that point in the web browser. and The formula for calculating rectangular coordinates is:

[0115]

[0116] S5.2, convert the rectangular coordinate points obtained in step S5.1 into composition coordinate points in the ternary phase diagram coordinate system;

[0117] like Figure 3 As shown, when the rectangular coordinates of point A are... At this time, the point is located on the midline of the side of the equilateral composition triangle representing the concentration of H2O, and parallel lines of the three sides of the equilateral composition triangle are drawn through the point A. 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 represented by the length, the concentration of the C2H6O component is A y represented by the length, the concentration of the C6H 12 component is A z represented by the length, and the sum of the concentrations of the three components is 1. Therefore, the composition coordinate value of the point A is (A x , A y , 1-A x -A y ). At the same time, according to Figure 3 , the following can be obtained:

[0118]

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

[0120] According to the conversion of formula (14), the following can be obtained:

[0121] As shown in Figure 4 , when the rectangular coordinates of the point B are , parallel lines of the three sides of the equilateral composition triangle are drawn through the point B. 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 represented by the length, the concentration of the C2H6O component is B y represented by the length, the concentration of the C6H 12 component is B z represented by the length, and the sum of the concentrations of the three components is 1. Therefore, the composition coordinate value of the point B is (B x , B y , 1-B x -B y ). At the same time, according to Figure 4 , the following can be obtained:

[0122]

[0123] According to the conversion of formula (16), the following can be obtained:

[0124] The extended lines of the points B and B y intersect at the point B yx , and the following can be obtained:

[0125]

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

[0127]

[0128] According to formulas (17), (18), and (19), we can obtain:

[0129]

[0130] like Figure 5 As shown, when the rectangular coordinates of point C are... At point C, draw lines parallel to the three sides of the equilateral triangle. Based on the intersection of these parallel lines and the characteristics of the ternary phase diagram, the concentration of component H2O is C. x The length represented, the concentration of component C2H6O is C y The length represented, C6H 12 The concentration of the component is C z The length represented by the three components, and the sum of their concentrations is 1, therefore, the component coordinates of point C are (C x C y ,1-C x -C y ). At the same time, according to Figure 5 We can obtain:

[0131]

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

[0133] Make points C and C y The extensions of the lines intersect at point C. yx ,get:

[0134]

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

[0136]

[0137] According to formulas (22), (23), and (24), we can obtain:

[0138]

[0139] Step S5 can display the ternary coordinates of any point in the ternary coordinate system. When a user wants to know which data a point on the line corresponds to, they only need to place the mouse on the line to get the coordinate value of the current point.

[0140] With the powerful interaction capabilities of D3.js, users can 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 may have difficulty updating the display quickly. This application can achieve real-time updating of the chart through data binding and DOM (Document Object Model) updating mechanisms, adapting to dynamic data environments. With the popularity of web applications, it has become a challenge to efficiently display complex ternary phase diagrams in the browser. D3.js is a JavaScript-based library that is naturally suitable for web environments and can be seamlessly integrated into web applications, supporting cross-platform access. When dealing with large-scale data sets, traditional tools may face performance bottlenecks. D3.js can effectively handle and display large-scale data sets through selective rendering and data binding techniques. 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, especially suitable for industrial application scenarios that require complex data analysis in a web environment.

[0141] The embodiment of the application also provides an implementation device of a ternary phase diagram based on D3.js, comprising:

[0142] A data table acquisition module is configured to acquire a ternary analysis data table based on an industrial process simulation design platform for simulating the production of high-purity ethanol from ethanol, water, and cyclohexane.

[0143] A coordinate system construction module is configured to construct a rectangular coordinate system in a web browser for drawing a ternary phase diagram, 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 configured to generate equilateral component triangles with a side length of L based on the coordinate axes established by the coordinate system construction module.

[0145] A remaining curve acquisition module is configured to confirm the right-angle coordinates of each component data in the equilateral component triangles obtained by the equilateral component triangle acquisition module based on the ternary analysis data table obtained by the data table acquisition module, so as to draw the component remaining curve.

[0146] A component coordinate calculation module is configured to confirm the component coordinate point in the ternary phase diagram coordinate system based on the real pixel position of any point in the equilateral component triangles obtained by the remaining curve acquisition module in the web browser.

[0147] The embodiment of the present application further provides an electronic device, which comprises a processor and a memory, and the memory stores a computer program, and the computer program is executed by the processor to perform the steps of the implementation method of the ternary phase diagram based on D3.js.

[0148] The embodiment of the present application further provides a computer readable storage medium, which stores a computer program, and the computer program is executed by the processor to perform the steps of the implementation method of the ternary phase diagram based on D3.js. Specifically, the storage medium can be a general storage medium, such as a mobile disk, a hard disk, etc., and the computer program stored on the storage medium can perform the embodiment of the implementation method of the ternary phase diagram based on D3.js when the computer program is executed.

[0149] The above merely describes the preferred embodiment of the present application, but should not be used to limit the present application, and any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the protection scope of the present application.

Claims

1. A method for implementing a ternary phase diagram based on D3.js, characterized in that, Comprise the following steps: S1, using industrial process simulation design platform to make based on ethanol, water and cyclohexane to obtain high purity ethanol simulation design, obtain ternary analysis data table; S2, in the web browser to be drawn ternary phase diagram, the rectangular coordinate system is constructed, the length L of ternary phase diagram is determined based on the size of web browser, and the display length and range of each coordinate axis are set in D3.js library; S3, the coordinate axis obtained in step S2 is moved to obtain an equilateral component triangle with a side length of L; S4, according to the ternary analysis data table obtained in step S1, the rectangular coordinates of each component data in the equilateral component triangle obtained in step S3 are confirmed to draw the component remaining curve; S5, according to the real pixel position of any point in the equilateral component triangle, the component coordinates in the ternary phase diagram coordinate system are confirmed.

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

3. The method of claim 1, wherein the method further comprises: In step S5, the confirmation method of the component coordinates in the ternary phase diagram coordinate system is as follows: When a component coordinate point is point A and its straight horizontal coordinate is A x , the component coordinate of point A is (A y , 1-A x , -A y ), wherein, A x = A y ; In the formula, R represents an internal angle of an equilateral component triangle, is a rectangular longitudinal coordinate of a component coordinate point; When a component coordinate point is point B and its rectangular coordinate is (B x , B y , 1-B x -B y ), wherein, When a component coordinate point is point C and its rectangular coordinates are (x, y, z), the component coordinate value of point C is (C , C x , C y , 1-C x , C y ).

4. The method of claim 1, wherein the D3.js-based ternary phase diagram is implemented by: The step S3 comprises the following steps: S3.1, translate the X axis down and the Y axis right by H Z axis left where L represents the side length of the ternary phase diagram, and H represents the height of the ternary phase diagram. S3.2, the rotation angle is calculated according to the trigonometric function theorem, and the Y axis and Z axis after translation are respectively rotated to obtain an equilateral component triangle with a side length of l according to the obtained rotation angle; The calculation formula of the rotation angle is as follows: In the formula, Math.atan is a built-in function of JavaScript, Math.PI is a circular constant, and δ represents the tangent value of the rotation angle.

5. An apparatus for implementing a ternary phase diagram based on D3.js, characterized in that, Comprise: The data table acquisition module is used to make a simulation design based on ethanol, water and cyclohexane to obtain high purity ethanol using an industrial process simulation design platform, and obtain a ternary analysis data table; The coordinate system construction module is used to construct a rectangular coordinate system in a web browser to be drawn ternary phase diagram, determine the length L of ternary phase diagram based on the size of web browser, and set the display length and range of each coordinate axis in D3.js library; The 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; The remaining curve acquisition module is 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 remaining curve; The component coordinate calculation module is used to confirm the component coordinates in the ternary phase diagram coordinate system according to the real pixel position of any point in the web browser in the equilateral component triangle obtained by the remaining curve acquisition module. 6.An electronic device comprising a processor and a memory, wherein, The memory stores a computer program, and the computer program is executed by the processor to execute the steps of the implementation method of the ternary phase diagram based on D3.js according to any one of claims 1-4.

7. A computer-readable storage medium having stored thereon a computer program, characterized in that The computer program is executed by the processor to execute the steps of the implementation method of the ternary phase diagram based on D3.js according to any one of claims 1-4.

Images