A method for rendering decision trees based on SVG

Abstract

The application relates to the technical field of browser rendering, and particularly discloses a method for rendering a decision tree based on SVG, which comprises the following steps: converting decision tree model data after training into a structured object containing node hierarchical relationships and attribute information of each node; defining differentiated visual styles containing shapes, colors and text labels for different types of nodes of the decision tree based on the structured object, and generating node SVG graphics by using SVG elements; calculating the size of an SVG canvas and determining the coordinates of each node by traversing the decision tree and combining a hierarchical layout algorithm; drawing connecting edges by using SVG path elements, and providing folding / unfolding logic for non-leaf nodes to control the display state of the child nodes and the connecting edges, and to switch the sub-tree view; binding interactive events and modifying styles for the SVG graphics as needed, and dynamically adjusting the visual effect; and integrating the complete SVG graphics into a target carrier for scalable display; and the method effectively solves the problems of traditional decision tree visualization in terms of interactivity, rendering clarity and scalability.

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:

[0007] 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.

[0008] 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.

[0009] 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.

[0010] 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;

[0011] 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;

[0012] 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.

[0013] 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.

[0014] Preferably, different types of nodes include root nodes, internal nodes, and leaf nodes;

[0015] 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.

[0016] 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;

[0017] And step 3, calculating the canvas size, includes:

[0018] ;

[0019] ;

[0020] 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.

[0021] Preferably, step 3, determining the node coordinates, includes:

[0022] 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:

[0023] ;

[0024] ;

[0025] in, The y-coordinate For level 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.

[0026] 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.

[0027] The control points are set as follows:

[0028] .

[0029] 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.

[0030] Preferably, the interactive events include mouse hover highlighting, click operation, path tracking and style switching;

[0031] 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.

[0032] Preferably, style control methods include inline properties, internal style sheets, and external CSS files.

[0033] Preferably, the target carrier includes a webpage and a specified container;

[0034] 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.

[0035] The API is designed in a RESTful style and returns data in JSON format, which facilitates front-end code calls and system integration.

[0036] The beneficial effects of this invention compared to existing technologies are as follows: A six-step process achieves multiple benefits: First, the decision tree model data is parsed into structured objects, laying the data foundation for subsequent rendering; then, differentiated visual styles are defined for different nodes and SVG graphic elements are generated to ensure visual differentiation of nodes; a layered layout algorithm is combined to determine the canvas size and node coordinates, achieving orderly node distribution; connecting edges are drawn and non-leaf node interaction logic is configured, clearly presenting node relationships and supporting dynamic subtree switching; interactive events and style modifications are bound to enhance the user experience; finally, SVG graphics are integrated and extended APIs are provided, achieving cross-platform high-definition scalable display while leaving sufficient space for future functional expansion. This effectively solves the shortcomings of traditional decision tree visualization in terms of interactivity, rendering clarity, and scalability, enhancing the interpretability of the decision tree model and the user experience.

[0037] Other features and advantages of the invention will be set forth in the description which follows, and will be apparent in part from the description, or may be learned by practicing the invention. The objects and other advantages of the invention may be realized and obtained by means of the structures particularly pointed out in this application.

[0038] The technical solution of the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. Attached Figure Description

[0039] The accompanying drawings are provided to further illustrate the invention and form part of the specification. They are used in conjunction with embodiments of the invention to explain the invention and do not constitute a limitation thereof. In the drawings:

[0040] Figure 1 This is a flowchart of the SVG-based decision tree rendering method in an embodiment of the present invention;

[0041] Figure 2 This is a schematic diagram of the layout calculation process in an embodiment of the present invention;

[0042] Figure 3 This is a flowchart of the interactive functions in an embodiment of the present invention. Detailed Implementation

[0043] The preferred embodiments of the present invention will be described below with reference to the accompanying drawings. It should be understood that the preferred embodiments described herein are for illustration and explanation only and are not intended to limit the present invention.

[0044] like Figure 1 As shown, this invention provides an embodiment of a method for rendering decision trees based on SVG, including:

[0045] Step 1: Obtain the trained decision tree model data. This data 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 and attribute information of each node. This step involves first obtaining the data related to the trained decision tree model. The tree structure reflects the overall framework of the decision tree, the node splitting rules determine how the data is divided at each node, and the leaf node prediction results are the final prediction output. Then, convert this data into a structured object that clearly presents the hierarchical relationships between nodes, such as which node is the parent node, which are the child nodes, and the attribute information of each node, facilitating subsequent processing of the decision tree.

[0046] Step 2: Based on the structured object, define differentiated visual styles for different types of nodes in the decision tree, and generate corresponding SVG graphic elements for each node using SVG elements. The visual styles include node shape, color, and text labels. Each SVG element includes at least a container element for grouping, a graphic element for drawing the node, and a text element for adding text. This means that based on the previously generated structured object, different visual styles are set for different types of nodes in the decision tree, such as root nodes, internal nodes, and leaf nodes, to make them visually distinguishable. The styles include the node shape (square, circle, etc.), color, and the text labels displayed. Simultaneously, SVG elements are used to generate the corresponding graphic elements for each node, where the grouping container element uses... <g>Elements, graphical elements used to draw nodes <rect>Elements, add text using <text>This standardizes the way node graphical elements are generated.

[0047] Step 3: Traverse the decision tree to obtain node distribution features. Based on these features and a hierarchical layout algorithm, calculate the SVG canvas size. Determine the coordinates of each node within the canvas based on the SVG canvas size and node distribution requirements. This step involves traversing the decision tree to obtain features related to node distribution, such as the maximum number of leaf nodes, the width and height of individual nodes, node spacing, the number of decision tree levels, and the spacing between levels. These features and the hierarchical layout algorithm are used to calculate the SVG canvas size. Once the canvas size is determined, the coordinates of each node within the canvas are determined based on the specific requirements of the node distribution, much like determining the position of each point on a plane, to ensure accurate node drawing on the canvas later. After traversing the decision tree to obtain node distribution features, dynamic spacing adjustment logic is also included.

[0048] If the number of nodes in a certain level is greater than 20, the spacing between nodes in that level will be automatically reduced from the default value (e.g., 20px) to 20px × (20 / current number of nodes) to avoid horizontal overflow.

[0049] If the number of decision tree levels is greater than 8, the spacing between levels will be automatically reduced from the default value (e.g., 60px) by 60px × (8 / current level), and the canvas height will be automatically expanded (expansion coefficient = current level / 8).

[0050] Added node density detection: Calculate the density of nodes in each level (number of nodes / level width). If the density is >0.8, automatically split the level into sub-levels (e.g., split level 1 into level 2, with the spacing between sub-levels being 1 / 2 of the original level spacing) to ensure that nodes do not overlap.

[0051] Step 4: Use SVG path elements to draw connecting edges between node coordinates to reflect the parent-child relationships in the decision tree; simultaneously, configure collapse / expand interaction logic for non-leaf nodes, dynamically switching the subtree view by controlling the display state of child nodes and corresponding connecting edges; this means using SVG path elements, specifically... <path>The element draws connecting edges between nodes with predetermined coordinates to display the parent-child relationships in the decision tree, providing a clear visual representation of the connections between nodes. For non-leaf nodes, collapsing and expanding interactive logic is configured. When the user interacts, they can control the display or hiding of child nodes and corresponding connecting edges, dynamically switching the subtree view and facilitating the viewing of different hierarchical structures of the decision tree. The drawing of connecting edges also includes an inference data association mechanism.

[0052] Bind a split feature ID to each non-leaf node (e.g., feature ID = 3 for age > 50), and bind a predicted category ID to each leaf node;

[0053] After receiving externally input sample data (such as {age: 55, blood pressure: 130}), the inference path of the sample is calculated in real time (such as root node → node A (age > 50) → node C (blood pressure ≤ 130) → leaf node B (predicted category = low risk)).

[0054] The connection edges of the inference path are drawn using quadratic Bézier curves and real-time color mapping: the color of the connection edges on the path changes dynamically with the sample matching degree (dark red for 100% matching degree, light red for 80%), and non-path connection edges are set to gray semi-transparent (transparency=0.3). The mouse click on the path edge can display the split rule matching details (e.g., sample age 55≥ node A split threshold 50, matching successful).

[0055] Step 5: Bind interactive events to the SVG graphics as needed and style them accordingly, dynamically adjusting the SVG elements visually through style controls. This step involves binding interactive events to the generated SVG graphics based on actual needs, such as mouse hover highlighting, click operations, path tracking, and style switching. Then, a JavaScript event delegation mechanism is used to bind these events uniformly to the SVG root element. <svg>Above. At the same time, SVG graphics can be styled using inline attributes, internal style sheets, and external CSS files to dynamically adjust the visual appearance of SVG elements, such as changing colors and sizes, to meet different display needs.

[0056] 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. The target carrier here includes web pages and specified containers; this involves integrating the generated complete SVG graphic into the web page or specified container and enabling scalable display. Several APIs are provided, including three categories: node information retrieval API, SVG style modification API, and interactive event customization API. These APIs are designed in a RESTful style, returning data in JSON format for easy front-end code calls and system integration. This allows different platforms and devices to display and manipulate this SVG-based rendering decision tree through these APIs, achieving cross-platform and cross-device high-definition rendering.

[0057] To clarify the specific composition of node attribute information, enabling structured objects to fully carry decision tree node-related data and provide a clear and comprehensive data foundation for subsequent processing, it is further proposed that 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.

[0058] This indicates that the node attribute information is specifically composed of these parts: the node identifier is used to uniquely identify each node; the node type distinguishes whether it is a root node, an internal node, or a leaf node; the splitting condition of a non-leaf node determines how the data is divided at that node; the prediction result of a leaf node is the final prediction value; and the list of child nodes associated with a node reflects the hierarchical relationship between nodes. With this specific information, the structured object can more completely carry the data of the decision tree nodes, facilitating various subsequent processing of the nodes.

[0059] To determine different types of nodes and their corresponding SVG elements, the visual presentation of decision tree nodes based on SVG rendering is standardized, so that there are clear standards for element usage in the rendering process. Furthermore, different types of nodes are proposed, including root nodes, internal nodes, and leaf nodes.

[0060] 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.

[0061] This explicitly states that decision trees have different types of nodes, including root nodes, internal nodes, and leaf nodes, and specifies the methods used when rendering these nodes using SVG. <g>The element serves as a container element for grouping. <rect>Elements draw node graphics. <text>Adding text to elements provides a unified standard and specification when rendering nodes, ensuring consistency and accuracy in the rendering process.

[0062] like Figure 2 As shown, in order to accurately calculate the SVG canvas size by defining node distribution characteristics and using relevant formulas, and to provide a size basis for rationally planning the layout of the decision tree on the SVG canvas, it is further proposed that 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 layer spacing.

[0063] And step 3, calculating the canvas size, includes:

[0064] ;

[0065] ;

[0066] 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, This is the width calibration factor (if the maximum number of leaf nodes > 30, then...). ,otherwise, ), The height calibration coefficient (if the number of decision tree layers is greater than 8, then...) ,otherwise, Additionally, if the number of nodes at a certain level is greater than 20, the following additional information will be added:

[0067] This ensures a compact vertical layout.

[0068] This section details the specific features included in the node distribution characteristics and uses two formulas to calculate the width and height of the SVG canvas. Based on parameters such as the maximum number of leaf nodes, the width and height of individual nodes, node spacing, the number of decision tree layers, and the spacing between layers, the appropriate canvas size is calculated using these formulas. This provides an accurate dimensional basis for the reasonable layout of the decision tree on the canvas, ensuring that the decision tree can be displayed completely and appropriately on the canvas.

[0069] like Figure 2 As shown, in order to establish a coordinate system with the top left corner of the canvas as the origin, and to determine the coordinate position of the node on the canvas using a specific formula, thereby achieving accurate positioning of the decision tree node on the SVG canvas, step 3 is further proposed to determine the node coordinate position, including:

[0070] 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:

[0071] ;

[0072] ;

[0073] in, The y-coordinate For level 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.

[0074] 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.

[0075] like Figure 3 As shown, in order to adopt <path>Elements and quadratic Bézier curves are used to draw connecting edges, clearly reflecting the parent-child relationships of nodes in the decision tree, making the visualization of the decision tree structure more intuitive. Furthermore, it is proposed that 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.

[0076] The control points are set as follows:

[0077] .

[0078] By setting such a starting point, ending point, and specific control points, the parent-child relationship of nodes in the decision tree can be clearly reflected, making the structure of the decision tree more intuitive when visualized. Users can clearly see the connections and hierarchical relationships between nodes.

[0079] like Figure 3 As shown, to enhance the interactivity of decision tree visualization by adding triangular arrow visual identifiers to non-leaf nodes and setting up collapse / expand interaction logic, making it easier for users to view and analyze the decision tree structure, step 4 further proposes adding triangular arrow visual identifiers to non-leaf nodes, with the arrow pointing towards the subtree. Clicking a non-leaf node triggers a collapse / expand interaction; initially, the subtree is in an expanded state, clicking switches to a collapsed state, and clicking again restores the expanded state. Simultaneously, the arrow direction rotates 180° with the state switch. This is to increase the interactivity of decision tree visualization by adding a triangular arrow visual identifier to non-leaf nodes, with the arrow pointing towards the subtree, allowing users to intuitively understand the direction of the subtree. The collapse and expand interaction logic allows users to switch between expanded and collapsed states when clicking a non-leaf node, and the arrow direction rotates 180° with the state switch. This facilitates users in viewing and analyzing the decision tree structure according to their needs, and better understanding the hierarchical relationships of the decision tree.

[0080] like Figure 3 As shown, in order to define interactive events and bind them using the JavaScript event delegation mechanism, rich interactive effects on SVG graphics are achieved, and the user experience is improved. Furthermore, interactive events are proposed to include mouse hover highlighting, click operation, path tracking and style switching.

[0081] 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, its border thickens, the connecting edges darken, and a floating window displaying detailed node information appears. During path tracing, the colors of nodes and connecting edges on the inference path are dynamically changed to red, while non-path nodes and connecting edges are set to a gray, semi-transparent state. Several interactive events are defined here, such as mouse hover highlighting, click actions, path tracing, and style switching. These events are uniformly bound to the root element of the SVG through a JavaScript event delegation mechanism. <svg>Above. When the user hovers the mouse over a node, the node border thickens, the connecting edges darken, and a floating window displaying detailed node information is shown. During path tracing, the colors of nodes and connecting edges on the inference path are dynamically changed to red, while nodes and connecting edges outside the path are set to gray and semi-transparent. This achieves rich interactive effects and enhances the user experience.

[0082] like Figure 3 As shown, to clarify style control methods and provide multiple style setting approaches for flexible and dynamic visual adjustments to SVG elements, the document further proposes style control methods including inline attributes, internal style sheets, and external CSS files. This means that when adjusting the style of SVG elements, styles can be set directly within the element tag using inline attributes, style rules can be defined within the document using internal style sheets, and styles can be set using external CSS files. These multiple methods allow for more flexible and dynamic visual adjustments to SVG elements based on actual needs, such as changing colors, fonts, and sizes.

[0083] To define the target carrier, an API for subsequent extended operations is designed, employing a RESTful style and JSON return format. This enables the integration and extension of the SVG-rendered decision tree across different platforms and devices, facilitating front-end calls and system integration. Furthermore, the target carrier is proposed to include web pages (such as HTML pages) and specified containers (such as...). element);

[0084] 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.

[0085] The API is designed in a RESTful style and returns data in JSON (JavaScriptObjectNotation) format, which facilitates front-end code calls and system integration.

[0086] This section clarifies that the target carriers are web pages and designated containers, and the SVG-based decision tree will be integrated onto these carriers. APIs for subsequent expansion operations are also designed, divided into three categories: node information retrieval API, SVG style modification API, and custom interactive event API. These APIs are designed in a RESTful style and return data in JSON format, allowing front-end code to easily call them and achieve system integration. This enables the SVG-based decision tree to be integrated and extended across different platforms and devices, meeting the needs of various usage scenarios.

[0087] Obviously, those skilled in the art can make various modifications and variations to this invention without departing from its spirit and scope. Therefore, if these modifications and variations fall within the scope of this invention and its equivalents, this invention 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 of rendering a decision tree based on SVG, characterized in that, The method comprises the following steps: Step 1: Obtain the trained decision tree model data, wherein the decision tree model data comprises 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; Step 2: Based on the structured object, define different 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; Step 3: Traverse the decision tree to obtain node distribution characteristics, calculate the SVG canvas size based on the node distribution characteristics 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: Draw connection edges between nodes using SVG path elements 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 to realize dynamic switching of sub-tree view by controlling the display state of child nodes and corresponding connection edges; Step 5: Bind interaction events to SVG graphics as needed and make style modifications, and dynamically adjust the visual of SVG elements through style control mode; Step 6: Integrate the complete SVG graphics into the target carrier for scalable display, and provide API for subsequent extension operations to support cross-platform and cross-device high-definition rendering.

2. The method of rendering a decision tree based on SVG according to claim 1, wherein, The node attribute information includes node identification, node type, splitting condition corresponding to non-leaf nodes, prediction result corresponding to leaf nodes and node associated child node list.

3. The method of rendering a decision tree based on SVG according to claim 1, wherein, Different types of nodes include root node, internal node and leaf node. and the container element used for grouping in step 2 is <g>Elements, the graphical elements used to draw the nodes are <rect>Element, for adding text, text element is <text>The element.< / text> < / rect> < / g> 4. The method of rendering a decision tree based on SVG according to claim 1, wherein, The node distribution characteristics include maximum number of leaf nodes, width and height of a single node, node spacing, number of decision tree layers and layer spacing; And step 3 calculates the canvas size, which comprises: ； ； wherein, is the canvas width, is the maximum number of leaf nodes, is the single node width, is the node spacing, is the canvas height, is the number of decision tree layers, is the single node height, is the layer spacing, is the width calibration factor, is the height calibration factor.

5. The method of rendering a decision tree based on SVG according to claim 1, wherein, Step 3 determines the coordinate position of the node, which comprises: Establish a plane rectangular coordinate system with the upper left corner of the canvas as the origin, the horizontal direction as the x-axis and the vertical direction as the y-axis; the y-coordinates of nodes in the same level are the same, and the calculation method of the y-coordinate is: ； ； wherein, is a y coordinate, is a hierarchical sequence number, is a single node height, is a hierarchical spacing, is an x coordinate, is a canvas width, is a single node width, is a current layer node number, is a node spacing, is a node sequence number and the node sequence number is sequentially increased from 0.

6. The method of rendering a decision tree based on SVG according to claim 1, wherein, The SVG path element in step 4 is <path>The element, and a quadratic Bezier curve is used when drawing the connection edge, wherein 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;< / path> Wherein, the control point is set as: 。 7. The method of rendering a decision tree based on SVG according to claim 1, wherein, In step 4, a triangular arrow visual identifier is added to the non-leaf node, and the arrow points to the sub-tree direction; the folding / unfolding interaction is triggered by clicking the non-leaf node, and the initial state is the unfolded state, which is switched to the folded state after clicking, and the unfolded state is restored by clicking again, and the arrow direction rotates 180° with the state switching.

8. The method of rendering a decision tree based on SVG according to claim 1, wherein, The interaction events include mouse hover highlighting, click operation, path tracking and style switching; In step 5, JavaScript event delegation mechanism is used to bind interactive events, and events are uniformly bound to the SVG root element <svg>When the mouse hovers, the node border is thickened and the connection edge color is deepened, and a node detailed information floating window is displayed; when the 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 non-path nodes and connection edges are set to gray semi-transparent state.< / svg> 9. The method of rendering a decision tree based on SVG according to claim 1, wherein, The style control mode includes inline attributes, internal style sheets and external CSS files.

10. The method of rendering a decision tree based on SVG according to claim 1, wherein, The target carriers include web pages and designated containers; 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, which is convenient for front-end code calling and system integration.

Images