CN-122019853-A - Pictographic tree data visualization method and system based on SVG
Abstract
The invention discloses a pictographic tree data visualization method based on SVG, which comprises the steps of obtaining a data set, wherein the data set comprises nodes belonging to different data levels, weighting calculation is carried out on the nodes to obtain a weighted data set, the weighted data set is rearranged to obtain an overall centered data set, the nodes of the centered data set are discretely arranged according to the data levels to obtain discrete points, the discrete points are not intersected with each other and are distributed in a tree crown shape, and the discrete points are connected to obtain branches which are not intersected with each other to form a tree-shaped display diagram, and the branches are distributed in the tree crown shape. The technical scheme of the invention improves the degree of visualization of view presentation.
Inventors
- WU YUEDONG
- ZHU YIWEN
- CAI HUI
Assignees
- 杭州读懂科技有限公司
Dates
- Publication Date
- 20260512
- Application Date
- 20251229
Claims (10)
- 1. The pictographic tree data visualization method based on SVG is characterized by comprising the following steps: obtaining a data set, wherein the data set comprises nodes belonging to different data levels, and weighting the nodes to obtain a weighted data set; carrying out discrete arrangement on the nodes of the centered data set according to the data hierarchy to obtain discrete points, wherein the discrete points are not intersected with each other and are distributed in a crown shape; And connecting the discrete points to obtain branches which are not intersected with each other to form a tree-shaped display diagram, wherein the branches are distributed in a crown shape.
- 2. The SVG pictographic tree data visualization method of claim 1, further comprising, based on a presentation defect of the tree presentation, trimming the tree presentation, the presentation defect comprising one or a combination of tree dents, the discrete point maldistributions, and the branch crossings.
- 3. The SVG pictographic tree data visualization method of claim 1, wherein the formula of the weighted calculation is: wherein x represents a weight basic multiple, and n is the number of children nodes of the current node.
- 4. The SVG pictographic tree data visualization method of claim 1, wherein the more levels and numbers of child nodes of the node, the greater the weight of the node, the greater the area of the node with greater weight, and the thicker the branch in which the node is located.
- 5. The SVG pictographic tree data visualization method of claim 4, wherein nodes at the same data level are weight compared.
- 6. The method for visualizing data on an SVG pictographic tree according to claim 1, wherein said rearranging said weighted dataset to obtain an overall centered dataset comprises determining a weight of a current node according to a hierarchical depth in which the current node is located and a number of sub-nodes attached under the current node, and wherein nodes having more sub-nodes with high weights and nodes with high weights are close to a centered position at the same hierarchical depth.
- 7. The SVG pictographic tree data visualization method of claim 1, wherein the discrete arrangement of nodes of the centered dataset according to a data hierarchy comprises: Determining a starting point, and determining semicircular areas corresponding to a first level and a second level in the data level according to the starting point, wherein the nodes in the first level and the second level calculate the occupied angle and occupied space of the nodes according to weight size and are discretely arranged in the semicircular areas by taking the starting point as a contraction direction; Setting a first distribution threshold and a first virtual circle center, a second distribution threshold and a second virtual circle center as well as a third distribution threshold and a third virtual circle center based on the quantity proportion of the child nodes of a third level of the nodes of the first level and the child nodes of the third level, wherein a first virtual circle area formed by the first distribution threshold and the first virtual circle center is intersected with a second virtual circle area formed by the second distribution threshold and the second virtual circle center, a second virtual circle area formed by the second distribution threshold and the second virtual circle center is intersected with a third virtual circle area formed by the third distribution threshold and the third virtual circle center, and the distribution range of the child nodes of the third level is determined based on the opening angles and the intersection of the first virtual circle area, the second virtual circle area and the third virtual circle area and is discretely distributed.
- 8. The SVG pictographic tree data visualization method of claim 1, wherein the connecting the discrete points to obtain mutually non-intersecting branches, forming a tree-like display diagram comprises: and the nodes positioned at the middle point of the branch are contracted based on a preset variable, so that a bending curve of the branch is realized, and the basic form of the crown is formed.
- 9. The SVG pictographic tree data visualization method of claim 1, wherein the data levels are three levels, including a first level, a second level, and a third level.
- 10. An SVG pictographic tree based data visualization system, comprising: The acquisition unit is used for acquiring a data set, wherein the data set comprises nodes belonging to different data levels, and the nodes are weighted to obtain a weighted data set; The discrete units are used for carrying out discrete arrangement on the nodes of the central data set according to the data hierarchy to obtain discrete points, and the discrete points are not intersected with each other and are distributed in a crown shape; The connection unit is used for connecting the discrete points to obtain branches which are not intersected with each other to form a tree-shaped exhibition diagram, and the branches are distributed in a crown shape.
Description
Pictographic tree data visualization method and system based on SVG Technical Field The invention belongs to the technical field of data visualization, and particularly relates to a pictographic tree data visualization method and system based on SVG. Background With the advent of big data and the Internet of things age, data content presents an exponential explosive growth situation. Because of the characteristics of large scale, heterogeneous and multiple data and loose organization structure, the method provides challenges for people to effectively acquire information and knowledge. Therefore, the data industry introduces data visualization to facilitate users to quickly acquire data information. Currently, there are many tools for visualizing data in the prior art, where d3.Js is most commonly used, and its main feature is to use a data-driven method to manipulate documents, and compared with many other data-visualizing frameworks, d3.Js does not limit the form of visualization, and provides strong control and flexibility, but d3.Js focuses on the implementation of data capability, and the displayed rules are more biased to the capability of professionals, and cannot enable users to directly perceive the feeling of a specific pictographic object. How to improve the visualization of the view presentation is one of the problems that needs to be solved at present. Disclosure of Invention Aiming at the defects of the prior art, the invention discloses a pictographic tree data visualization method based on SVG, which comprises the following steps: obtaining a data set, wherein the data set comprises nodes belonging to different data levels, and weighting the nodes to obtain a weighted data set; carrying out discrete arrangement on the nodes of the centered data set according to the data hierarchy to obtain discrete points, wherein the discrete points are not intersected with each other and are distributed in a crown shape; And connecting the discrete points to obtain branches which are not intersected with each other to form a tree-shaped display diagram, wherein the branches are distributed in a crown shape. Further, the method further comprises fine tuning the tree representation based on a representation defect of the tree representation, the representation defect comprising one or a combination of a plurality of tree dents, the discrete point maldistribution and the branch crossing. Further, the formula of the weighting calculation is: wherein x represents a weight basic multiple, and n is the number of children nodes of the current node. Further, the more the levels and the number of the child nodes of the node are, the greater the weight of the node is, the greater the area of the node with the greater weight is, and the thicker the branch where the node is located is. Further, the nodes at the same data level are subjected to weight comparison. Further, rearranging the weighted data sets to obtain an overall centered data set includes determining the weight of the current node according to the hierarchical depth of the current node and the number of sub-nodes attached to the current node, wherein when the hierarchical depth is the same, the weight of the nodes with more sub-nodes is high and the nodes with high weights are close to the centered position. Further, the discretely arranging the nodes of the centered dataset according to a data hierarchy includes: Determining a starting point, and determining semicircular areas corresponding to a first level and a second level in the data level according to the starting point, wherein the nodes in the first level and the second level calculate the occupied angle and occupied space of the nodes according to weight size and are discretely arranged in the semicircular areas by taking the starting point as a contraction direction; Setting a first distribution threshold and a first virtual circle center, a second distribution threshold and a second virtual circle center as well as a third distribution threshold and a third virtual circle center based on the quantity proportion of the child nodes of a third level of the nodes of the first level and the child nodes of the third level, wherein a first virtual circle area formed by the first distribution threshold and the first virtual circle center is intersected with a second virtual circle area formed by the second distribution threshold and the second virtual circle center, a second virtual circle area formed by the second distribution threshold and the second virtual circle center is intersected with a third virtual circle area formed by the third distribution threshold and the third virtual circle center, and the distribution range of the child nodes of the third level is determined based on the opening angles and the intersection of the first virtual circle area, the second virtual circle area and the third virtual circle area and is discretely distributed. Further, the tree-shaped display diagram is formed