SVG-based decision tree rendering method

Abstract

The invention relates to the technical field of browser rendering, and particularly discloses an SVG (scalable vector graphics)-based decision tree rendering method, which comprises the following steps of: converting trained decision tree model data into a structured object containing a node hierarchical relationship and attribute information of each node; defining differentiated visual styles containing shapes, colors and character tags for different types of nodes of the decision tree based on the structured object, and generating a node SVG graph by using SVG elements; traversing the decision tree to obtain node distribution characteristics, calculating the size of the SVG canvas in combination with a hierarchical layout algorithm, and determining the coordinates of each node; drawing a connecting edge by using the SVG path elements and matching folding / unfolding logic for non-leaf nodes, and controlling the sub-nodes and the connecting edge to display a state switching sub-tree view; interaction events are bound for the SVG graph according to needs, styles are modified, and the visual effect is dynamically adjusted; integrating the complete SVG graph to a target carrier for scalable display; the defects of traditional decision tree visualization in interactivity, rendering definition and expandability are effectively overcome.

Description

Technical Field

[0001] This invention relates to the field of browser rendering technology, and in particular to a method based on SVG rendering decision trees. Background Technology

[0002] Currently, in the fields of machine learning and data mining, decision trees, as models with strong interpretability, are widely used in classification and regression tasks. Their visualization technology is a key support for helping users understand the model structure and reasoning logic, and is of great significance for improving the application value of the model and the user experience. Currently, the commonly used technical solutions in the field of decision tree visualization include rendering methods based on static images (such as PNG and JPG) and implementation methods relying on general plotting libraries (such as Matplotlib and Graphviz). These technologies have mature applications at the basic tree structure display level and can meet users' needs for viewing the topological relationships of decision trees in simple scenarios. Meanwhile, with the development of browser technology and front-end development, Canvas-based rendering solutions have also been used for decision tree visualization, providing a certain degree of flexibility in graphic drawing. These technologies together constitute the existing technical system in the field of decision tree visualization, supporting the application of decision tree models in various industries. Furthermore, with the increase in model complexity and the diversification of application scenarios, the optimization and innovation of decision tree visualization technology has become one of the important directions for the development of the field, playing a crucial role in further releasing the interpretability potential of decision tree models.

[0003] Current technologies for decision tree visualization suffer from several shortcomings: First, static image-based rendering methods lack vector graphics characteristics, leading to image distortion when users zoom in or out, failing to meet the need for clear viewing of complex decision tree structure details; second, general drawing libraries and Canvas rendering solutions lack systematic support for differentiated visual styles of nodes, making it difficult to visually distinguish and intuitively present the attribute differences between different types of nodes (such as root nodes, internal nodes, and leaf nodes); third, existing technologies do not incorporate hierarchical layout algorithms to dynamically calculate canvas size and node coordinates, easily resulting in overlapping nodes or unreasonable use of canvas space, affecting the overall display of the tree structure. Fourth, non-leaf nodes generally lack folding / expanding interaction logic, making it impossible to dynamically switch subtree views and hindering the hierarchical exploration of large-scale decision trees; fifth, the interactive function design is incomplete, with most solutions only supporting basic viewing operations and lacking interactive events such as mouse hover highlighting and path tracking, and the style adjustment flexibility is insufficient, making it difficult to dynamically adapt to users' personalized needs for graphical visual effects; sixth, existing technologies do not provide standardized APIs for subsequent extended operations, and cross-platform and cross-device rendering compatibility is poor, failing to meet the needs of system integration and high-definition display in different application scenarios. These shortcomings collectively limit the application efficiency and user experience of decision tree visualization technology.

[0004] Therefore, this invention proposes a method based on SVG rendering decision trees. Summary of the Invention

[0005] This invention provides a method for rendering decision trees based on SVG, which effectively solves the shortcomings of traditional decision tree visualization in terms of interactivity, rendering clarity and scalability, and enhances the interpretability of decision tree models and user experience.

[0006] This invention provides a method for rendering decision trees based on SVG, comprising: Step 1: Obtain the trained decision tree model data, which includes the tree structure, node splitting rules, and leaf node prediction results. Convert the decision tree model data into a structured object, which contains the node hierarchy relationship and the attribute information of each node. Step 2: Based on structured objects, define differentiated visual styles for different types of nodes in the decision tree, and use SVG elements to generate corresponding SVG graphic elements for each node. The visual styles include node shape, color and text labels. The SVG elements include at least container elements for grouping, graphic elements for drawing nodes and text elements for adding text. Step 3: Traverse the decision tree to obtain node distribution features, calculate the SVG canvas size based on the node distribution features and the hierarchical layout algorithm, and determine the coordinate position of each node in the canvas according to the SVG canvas size and node distribution requirements. Step 4: Use SVG path elements to draw connecting edges between the coordinates of each node to reflect the parent-child relationship of nodes in the decision tree; at the same time, configure collapse / expand interaction logic for non-leaf nodes, and realize dynamic switching of subtree view by controlling the display state of child nodes and corresponding connecting edges; Step 5: Bind interactive events to the SVG graphics as needed and style them, and dynamically adjust the visual appearance of the SVG elements through style control methods; Step 6: Integrate the complete SVG graphic into the target carrier for scalable display, and provide APIs for subsequent extended operations, supporting cross-platform and cross-device high-definition rendering.

[0007] Preferably, the node attribute information includes node identifier, node type, splitting conditions corresponding to non-leaf nodes, prediction results corresponding to leaf nodes, and a list of child nodes associated with the node.

[0008] Preferably, different types of nodes include root nodes, internal nodes, and leaf nodes; And the container element used for grouping in step 2 is <g>Elements, the graphical elements used to draw nodes are <rect>The element, a text element used to add text, is... <text>element.

[0009] Preferably, the node distribution characteristics include the maximum number of leaf nodes, the width and height of a single node, the node spacing, the number of decision tree layers, and the spacing between layers; And step 3, calculating the canvas size, includes: ; ; in, The width of the canvas. The maximum number of leaf nodes. Width of a single node The node spacing, The height of the canvas. For the number of layers in the decision tree, The height of a single node. For the spacing between levels, For width calibration coefficient, This is the high calibration coefficient.

[0010] Preferably, step 3, determining the node coordinates, includes: Establish a Cartesian coordinate system with the top left corner of the canvas as the origin, with the horizontal axis as the x-axis and the vertical axis as the y-axis; nodes at the same level have the same y-coordinate, and the y-coordinate is calculated as follows: ; ; in, The y-coordinate For level sequence number, The height of a single node. For the spacing between levels, Let x be the x-coordinate. The width of the canvas. Width of a single node This represents the number of nodes in the current layer. The node spacing, The node number is the node sequence number, and the node sequence number starts from 0 and increases sequentially.

[0011] Preferably, the SVG path element in step 4 is <path>The elements are drawn using quadratic Bézier curves, with the curve starting at the bottom right corner of the parent node and ending at the top left corner of the child node. The control points are set as follows: .

[0012] Preferably, in step 4, a triangular arrow visual identifier is added to the non-leaf node, with the arrow pointing in the direction of the subtree; clicking on the non-leaf node triggers the collapse / expand interaction. Initially, the subtree is in the expanded state. After clicking, it switches to the collapsed state. Clicking again restores the expanded state. At the same time, the arrow direction rotates 180° with the state switch.

[0013] Preferably, the interactive events include mouse hover highlighting, click operation, path tracking and style switching; Step 5 uses JavaScript event delegation to bind interactive events, uniformly binding the events to the SVG root element. <svg>When the mouse hovers, the node border is thickened, the connection edge color is deepened, and the node detailed information floating window is displayed; when the path is tracked, the colors of the nodes and the connection edges on the reasoning path are dynamically modified to red, and the non-path nodes and the connection edges are set to a gray semi-transparent state.

[0014] Preferably, the style control mode includes inline attributes, internal style sheets and external CSS files.

[0015] Preferably, the target carrier includes a web page and a specified container. The API for subsequent expansion operation in step 6 includes three categories: node information acquisition API, SVG style modification API and interactive event customization API. The API is designed in the RESTful style, and the return format is JSON, facilitating the front-end code calling and system integration.

[0016] The beneficial effects generated by the present application relative to the prior art are: through a six-step process, the following beneficial effects are achieved: first, the decision tree model data is parsed into a structured object, laying a data foundation for subsequent rendering; second, differentiated visual styles are defined for different nodes and SVG graphic elements are generated, ensuring node visual differentiation; third, the canvas size and node coordinates are determined in combination with a hierarchical layout algorithm, realizing ordered distribution of nodes; fourth, connection edges are drawn and non-leaf node interaction logic is configured, clearly presenting node relationships and supporting dynamic switching of sub-trees; fifth, interactive events and style modification are bound, improving user interaction experience; and finally, the SVG graphics are integrated and expansion API is provided, realizing cross-platform high-definition scalable display and leaving room for subsequent functional expansion, effectively solving the deficiencies of traditional decision tree visualization in terms of interactivity, rendering clarity and scalability, enhancing the explainability of the decision tree model and user experience.

[0017] Other features and advantages of the present application will be set forth in the following description, and in part will become apparent to those skilled in the art from the description, or can be learned by practice of the present application. The objects and other advantages of the present application will be realized and attained by the structure particularly pointed out in the written description and claims thereof.

[0018] The technical solutions of the present application will be further described in detail below with the aid of the accompanying drawings and examples. BRIEF DESCRIPTION OF DRAWINGS

[0019] The accompanying drawings are included to provide a further understanding of the present application, and constitute a part of the specification, illustrate the present application and are used to explain the present application together with the embodiments of the present application, and do not constitute a limitation on the present application. In the drawings: Figure 1 The method flowchart for rendering a decision tree based on SVG in the embodiments of the present application is shown in the figure. Figure 2 The layout calculation flowchart in the embodiments of the present application is shown in the figure. Figure 3 An interactive function flowchart in an embodiment of the present application. DETAILED DESCRIPTION

[0020] The preferred embodiments of the present application will be described herein below with reference to the accompanying drawings. It is to be understood that the preferred embodiments described herein are merely intended to explain and illustrate the present application, and should not be used to limit the present application.

[0021] As Figure 1 shown, the present application provides an embodiment of a method for rendering a decision tree based on SVG, comprising: Step 1: Obtain the trained decision tree model data, wherein the decision tree model data includes tree structure, node splitting rule and leaf node prediction result, and convert the decision tree model data into a structured object, wherein the structured object contains node hierarchical relationship and attribute information of each node; this step is to obtain the data related to the trained decision tree model first, the tree structure represents the overall framework of the decision tree, the node splitting rule determines how the data is divided at each node, and the leaf node prediction result is the final prediction output. Then convert these data into a structured object, which can clearly present the hierarchical relationship between nodes, such as which node is the parent node, which is the child node, and the attribute information of each node itself, which is convenient for subsequent processing of the decision tree.

[0022] Step 2: Based on the structured object, define differentiated visual styles for different types of nodes in the decision tree, and generate corresponding SVG graphical elements for each node using SVG elements, wherein the visual styles include node shape, color and text label, and the SVG elements at least include container elements for grouping, graphical elements for drawing nodes and text elements for adding text; here it is said that according to the structured object generated in the previous step, different visual styles are set for different types of nodes in the decision tree, such as root node, internal node and leaf node, so that they can be distinguished visually, including node shape, such as square, circle, etc., color and text label displayed thereon. At the same time, SVG elements are used to generate graphical elements corresponding to each node, wherein the container elements for grouping are used to group nodes of the same type, the graphical elements for drawing nodes are used to draw nodes of different types, and the text elements for adding text are used to add text labels of different types. <g>element, a graphical element that draws the node with <rect>Elements, add text as used <text>elements, so that the way of generating node graphics elements is regulated.

[0023] Step 3: traverse the decision tree to obtain node distribution characteristics, calculate the SVG canvas size based on the node distribution characteristics combined with the hierarchical layout algorithm, and determine the coordinate position of each node in the canvas according to the SVG canvas size and node distribution requirements; this step is to traverse the decision tree to obtain some characteristics related to node distribution, such as the maximum number of leaf nodes, the width and height of a single node, the node spacing, the number of decision tree layers, and the level spacing. Use these characteristics and hierarchical layout algorithms to calculate the size of the SVG canvas. After obtaining the canvas size, determine the coordinate position of each node in the canvas according to the specific requirements of node distribution, just like determining the position of each point on a plane, so as to accurately draw nodes on the canvas later. After traversing the decision tree to obtain node distribution characteristics, dynamic spacing adjustment logic is also included: If the number of nodes in a level is > 20, automatically reduce the node spacing of this level from the default value (such as 20px) to 20px x (20 / current number of nodes) to avoid horizontal overflow; If the number of decision tree layers is > 8, automatically reduce the level spacing from the default value (such as 60px) by 60px x (8 / current number of layers), while triggering the canvas height adaptive expansion (expansion coefficient = current number of layers / 8); New node density detection: calculate the density of each level node (number of nodes / level width), if the density > 0.8, automatically split the level into sub-levels (such as splitting 1 level into 2 levels, the sub-level spacing is 1 / 2 of the original level spacing), to ensure that nodes do not overlap.

[0024] Step 4: use SVG path elements to draw connecting edges between node coordinates to reflect the parent-child relationship of nodes in the decision tree; at the same time, configure folding / unfolding interaction logic for non-leaf nodes, and realize dynamic switching of sub-tree view by controlling the display state of child nodes and corresponding connecting edges; this means using SVG path elements, here specifically <path>Elements, the connection edge between the nodes which have determined the coordinate position is drawn to show the parent-child relationship of the nodes in the decision tree, so that people can directly see the connection between the nodes. For non-leaf nodes, folding and unfolding interaction logic is also configured. When the user operates, the display or hiding of the child nodes and the corresponding connection edge can be controlled to realize the dynamic switching of the sub-tree view, which is convenient for users to view the different hierarchical structures of the decision tree. When drawing the connection edge, the reasoning data association mechanism is also included: Bind the split feature ID (such as age> 50 corresponding feature ID=3) for each non-leaf node, and bind the prediction class ID for the leaf node; After receiving the external input sample data (such as {age: 55, blood pressure: 130}), the reasoning path of the sample (such as root node→node A (age> 50)→node C (blood pressure≤130)→leaf node B (prediction class=low risk)) is calculated in real time; The connection edge of the reasoning path is drawn by using quadratic Bezier curve+real-time color mapping: the color of the connection edge on the path changes dynamically with the matching degree of the sample (matching degree 100% is dark red, 80% is light red), the non-path connection edge is set to gray semi-transparent (transparency=0.3), and the mouse click path edge is supported to display the split rule matching details (such as sample age 55≥node A split threshold 50, matching success).

[0025] Step 5: Bind interactive events to SVG graphics on demand and perform style modification, and dynamically adjust the visual effect of SVG elements through style control. This step is to bind some interactive events to the generated SVG graphics according to actual needs, such as mouse hover highlighting, click operation, path tracking, and style switching, etc. Then, the JavaScript event delegation mechanism is used to bind these events to the SVG root element <svg>The SVG graphics can be styled by inline attributes, internal style sheets and external CSS files to dynamically adjust the visual effects of SVG elements, such as changing colors and sizes, to meet different display requirements.

[0026] Step 6: The complete SVG graphics are integrated into a target carrier for scalable display, and an API is provided for subsequent expansion operations to support cross-platform and cross-device high-definition rendering. The target carrier here includes a web page and a specified container, that is, the generated complete SVG graphics are integrated into a web page or a specified container, and can be displayed in a scalable manner. Meanwhile, some APIs are provided, including node information acquisition API, SVG style modification API and interactive event customization API, which are designed in the RESTful style and return in the JSON format, facilitating the front-end code calling and system integration. In this way, different platforms and devices can display and operate the decision tree based on SVG rendering through these APIs, realizing cross-platform and cross-device high-definition rendering.

[0027] To clearly define the specific composition of node attribute information and enable the structured object to completely carry the relevant data of the decision tree node, the node attribute information is further proposed to include node identification, node type, split condition of non-leaf node, prediction result of leaf node and node-associated child node list.

[0028] This indicates that the node attribute information is specifically composed of these parts, the node identification is used to uniquely determine each node, the node type is used to distinguish whether it is a root node, an internal node or a leaf node, the split condition of the non-leaf node is used to determine how the data is divided at the node, the prediction result of the leaf node is the final prediction value, and the node-associated child node list reflects the hierarchical relationship between nodes. With these specific information, the structured object can more completely carry the data of the decision tree node, facilitating subsequent processing of the node.

[0029] To determine different types of nodes and corresponding SVG elements and standardize the visual presentation of the decision tree nodes based on SVG rendering, the rendering process has a clear element usage standard, and it is further proposed that different types of nodes include root nodes, internal nodes and leaf nodes. The container element used for grouping in step 2 is <g>Elements, the graphical elements used to draw the nodes are <rect>Element, text element for adding text is <text>Elements.

[0030] This is in the explicit decision tree has root node, internal node and leaf node these different types, and stipulated in the use of SVG rendering these nodes, using <g>elements as container elements for groups, <rect>Element drawing node graph, <text>Element addition text, so that when rendering nodes have a uniform standard and specification, to ensure the consistency and accuracy of the rendering process.

[0031] As Figure 2 shown, in order to define the node distribution characteristics, accurate calculation of SVG canvas size by using the relevant formula, for reasonable planning decision tree layout on the SVG canvas size basis, further proposed node distribution characteristics including the maximum number of leaf nodes, single node width and height, node spacing, decision tree layer and level spacing; And step 3 calculation canvas size includes: ; ; Among them, the canvas width, the maximum number of leaf nodes, single node width, node spacing, the canvas height, decision tree layer, single node height, level spacing, width calibration coefficient (if the maximum number of leaf nodes > 30, then , otherwise, ), height calibration coefficient (if the number of decision tree layers > 8, then , otherwise, ) while if the number of nodes in a level > 20, additional superposition: , to ensure the vertical layout compact.

[0032] This is given the node distribution characteristics of the specific content, and through the two formula to calculate the width and height of SVG canvas. With the maximum number of leaf nodes, single node width and height, node spacing, decision tree layer and level spacing these parameters as the basis, through formula calculation of appropriate canvas size, so as to provide accurate size basis for the decision tree on the canvas reasonable layout, to ensure that the decision tree can be complete and suitable for display on the canvas.

[0033] As Figure 2 shown, in order to establish the coordinate system with the canvas upper left corner as the origin, through the specific formula to determine the node coordinate position in the canvas, to realize the decision tree node in SVG canvas accurate positioning, further proposed step 3 to determine the node coordinate position, including: With the canvas upper left corner as the origin to establish a plane rectangular coordinate system, horizontal for x axis, vertical for y axis; The same level node y coordinate is the same, and the calculation method of y coordinate is: ; ; in, The y-coordinate For level sequence number, The height of a single node. For the spacing between levels, Let x be the x-coordinate. The width of the canvas. Width of a single node This represents the number of nodes in the current layer. The node spacing, The node number is the node sequence number, and the node sequence number starts from 0 and increases sequentially.

[0034] This refers to establishing a Cartesian coordinate system with the top-left corner of the canvas as the origin, and determining the coordinate positions of nodes according to this coordinate system. For the y-coordinate, nodes at the same level have the same y-coordinate, calculated using the relationship between the level number, the height of a single node, and the spacing between levels. For the x-coordinate, it is calculated using formulas based on parameters such as the canvas width, the number of nodes in the current layer, the width of a single node, and the spacing between nodes. These formulas allow for precise positioning of the coordinates of each node on the canvas.

[0035] like Figure 3 As shown, in order to adopt <path>The element and the quadratic Bezier curve drawing connection edge clearly reflect the parent-child relationship of the nodes in the decision tree, and the visual display of the decision tree structure is more intuitive, and further the SVG path element in step 4 is <path>Elements, and a quadratic Bezier curve is used when drawing the connection edge, where the starting point of the curve is the lower right corner of the parent node and the ending point is the upper left corner of the child node. wherein the control points are set as: .

[0036] By setting such a starting point, an ending point, and specific control points, the parent-child relationship of the nodes in the decision tree can be clearly reflected, and the structure of the decision tree is more intuitive when visualized, and the user can clearly see the connection and hierarchical relationship between the nodes.

[0037] As shown in Figure 3 , to enhance the interactivity of the decision tree visualization, facilitate user viewing and analysis of the decision tree structure, and further add a triangular arrow visual identifier to the non-leaf node in step 4, the arrow points to the direction of the sub-tree; click the non-leaf node to trigger the folding / unfolding interaction, the initial state of the sub-tree is unfolded, and after clicking, it switches to the folded state, and the next click restores the unfolded state, and the arrow direction rotates 180° with the state switching. This is to increase the interactivity of the decision tree visualization, add a triangular arrow visual identifier to the non-leaf node, and the arrow points to the direction of the sub-tree, so that the user can intuitively understand the direction of the sub-tree. At the same time, the folding and unfolding interaction logic is set, the user clicks the non-leaf node, and the sub-tree will switch between the unfolded and folded states, and the arrow direction will also rotate 180° with the state switching, so that the user can view and analyze the structure of the decision tree according to his own needs, and better understand the hierarchical relationship of the decision tree.

[0038] As shown in Figure 3 , to define interaction events and bind them using the JavaScript event delegation mechanism, achieve rich interaction effects on SVG graphics, and improve user experience, further propose that the interaction events include mouse hover highlighting, click operation, path tracking, and style switching; In step 5, the JavaScript event delegation mechanism is used to bind the interaction events, and the events are uniformly bound to the SVG root element <svg>When the mouse hovers over a node, the node border is thickened, the connection edge is darkened, and a floating window of detailed information of the node is displayed. When path tracking is performed, the colors of the nodes and connection edges on the reasoning path are dynamically modified to red, and the colors of the nodes and connection edges that are not on the path are set to a gray semi-transparent state. Some interaction events, such as mouse hover highlighting, click operation, path tracking, and style switching, are defined, and these events are uniformly bound to the root element of SVG through a JavaScript event delegation mechanism <svg>When the user mouse hovers over the node, the node border is thickened, the connection edge color is deepened, and the floating window of the node detailed information is displayed; when the path tracking is performed, the nodes and the connection edges on the reasoning path are dynamically modified to be red, and the nodes and the connection edges that are not on the path are set to be gray and semi-transparent, so that rich interaction effects are achieved, and the experience of the user during use is improved.

[0039] As shown in Figure 3 To determine the style control mode, multiple style setting approaches are provided to facilitate flexible dynamic visual adjustment of the SVG element, and it is further proposed that the style control mode includes inline attributes, internal style sheets and external CSS files. That is, when the SVG element is adjusted in style, the style can be directly set in the element tag through inline attributes, the style rules can be defined in the document internally using internal style sheets, and the style can also be set through external CSS files, multiple approaches are provided, so that the SVG element can be dynamically adjusted in visual more flexibly according to actual needs, such as changing color, font, size and other styles.

[0040] To determine the target carrier, the API for subsequent expansion operation is designed, the RESTful style and the JSON return format are adopted, the integration and expansion of the decision tree based on SVG rendering on different platforms and devices are realized, the front-end calling and system integration are facilitated, and it is further proposed that the target carrier includes a web page (such as an HTML page) and a specified container (such as a Element); The API for subsequent extension operation in step 6 includes three categories: node information acquisition API, SVG style modification API and interaction event customization API; The API is designed in RESTful style and returns JSON (JavaScript Object Notation) format, which is convenient for front-end code calling and system integration.

[0041] Here, it is clear that the target carrier is a webpage and a specified container, and the SVG-based rendering decision tree is integrated into these carriers. Meanwhile, the API for subsequent extension operation is designed, which includes three categories: node information acquisition API, SVG style modification API and interaction event customization API, and is designed in RESTful style and returns JSON format, so that the front-end code can conveniently call these APIs, realize system integration, and enable the SVG-based rendering decision tree to be integrated and extended on different platforms and devices, and meet the use requirements of different scenarios.

[0042] Obviously, those skilled in the art can make various modifications and variations to the present application without departing from the spirit and scope of the present application. Thus, if these modifications and variations of the present application belong to the scope of the present application and its equivalent technology, the present application also intends to include these modifications and variations. < / svg> < / svg> < / path> < / path> < / text> < / rect> < / g> < / text> < / rect> < / g> < / svg> < / path> < / text> < / rect> < / g> < / svg> < / path> < / text> < / rect> < / g>

Claims

1. A method for rendering decision trees based on SVG, characterized in that, include: Step 1: Obtain the trained decision tree model data, which includes the tree structure, node splitting rules, and leaf node prediction results. Convert the decision tree model data into a structured object, which contains the node hierarchy relationship and the attribute information of each node. Step 2: Based on structured objects, define differentiated visual styles for different types of nodes in the decision tree, and use SVG elements to generate corresponding SVG graphic elements for each node. The visual styles include node shape, color and text labels. The SVG elements include at least container elements for grouping, graphic elements for drawing nodes and text elements for adding text. Step 3: Traverse the decision tree to obtain node distribution features, calculate the SVG canvas size based on the node distribution features and the hierarchical layout algorithm, and determine the coordinate position of each node in the canvas according to the SVG canvas size and node distribution requirements. Step 4: Use SVG path elements to draw connecting edges between the coordinates of each node to reflect the parent-child relationship of nodes in the decision tree; at the same time, configure collapse / expand interaction logic for non-leaf nodes, and realize the dynamic switching of subtree view by controlling the display state of child nodes and corresponding connecting edges; Step 5: Bind interactive events to the SVG graphics as needed and style them, and dynamically adjust the visual appearance of the SVG elements through style control methods; Step 6: Integrate the complete SVG graphic into the target carrier for scalable display, and provide APIs for subsequent extended operations, supporting cross-platform and cross-device high-definition rendering.

2. The method based on SVG rendering decision tree according to claim 1, characterized in that, Node attribute information includes node identifier, node type, splitting conditions for non-leaf nodes, prediction results for leaf nodes, and a list of child nodes associated with the node.

3. The method for rendering a decision tree based on SVG according to claim 1, characterized in that, Different types of nodes include root nodes, internal nodes, and leaf nodes; And the container element used for grouping in step 2 is <g>Elements, the graphical elements used to draw nodes are <rect>The element, a text element used to add text, is... <text> element.< / text> < / rect> < / g> 4. The method for rendering a decision tree based on SVG according to claim 1, characterized in that, Node distribution characteristics include the maximum number of leaf nodes, the width and height of a single node, the node spacing, the number of decision tree layers, and the spacing between layers. And step 3, calculating the canvas size, includes: ； ； in, The width of the canvas. The maximum number of leaf nodes. Width of a single node The node spacing, The height of the canvas. For the number of layers in the decision tree, The height of a single node. For the spacing between levels, For width calibration coefficient, This is the high calibration coefficient.

5. The method for rendering a decision tree based on SVG according to claim 1, characterized in that, Step 3 determines the node coordinates, including: Establish a Cartesian coordinate system with the top left corner of the canvas as the origin, with the horizontal axis as the x-axis and the vertical axis as the y-axis; nodes at the same level have the same y-coordinate, and the y-coordinate is calculated as follows: ； ； in, The y-coordinate For level sequence number, The height of a single node. For the spacing between levels, Let x be the x-coordinate. The width of the canvas. Width of a single node This represents the number of nodes in the current layer. The node spacing, The node number is the node sequence number, and the node sequence number starts from 0 and increases sequentially.

6. The method for rendering a decision tree based on SVG according to claim 1, characterized in that, In step 4, the SVG path element is <path> The elements are drawn using quadratic Bézier curves, with the curve starting at the bottom right corner of the parent node and ending at the top left corner of the child node.< / path> The control points are set as follows: 。 7. The method for rendering a decision tree based on SVG according to claim 1, characterized in that, In step 4, add a triangular arrow visual identifier to the non-leaf nodes, with the arrow pointing in the direction of the subtree; clicking on a non-leaf node triggers a collapse / expand interaction. Initially, the subtree is in an expanded state. Clicking it switches to a collapsed state, and clicking it again restores the expanded state. At the same time, the arrow direction rotates 180° with the state switch.

8. The method for rendering a decision tree based on SVG according to claim 1, characterized in that, Interactive events include mouse hover highlighting, click operations, path tracking, and style switching; Step 5 uses JavaScript event delegation to bind interactive events, uniformly binding the events to the SVG root element. <svg> When the mouse hovers over a node, the node border thickens, the connecting edges darken, and a floating window displays detailed node information. During path tracing, the color of nodes and connecting edges on the inference path is dynamically changed to red, while non-path nodes and connecting edges are set to a gray semi-transparent state.< / svg> 9. The method for rendering a decision tree based on SVG according to claim 1, characterized in that, Style control methods include inline properties, internal style sheets, and external CSS files.

10. The method for rendering a decision tree based on SVG according to claim 1, characterized in that, The target carrier includes web pages and specified containers; The APIs used for subsequent extended operations in step 6 include three categories: node information retrieval API, SVG style modification API, and interactive event customization API. The API is designed in a RESTful style and returns data in JSON format, which facilitates front-end code calls and system integration.

Images