【D3.js Tidy tree绘制树形图,单棵树,左右树,平移,拖拽,树形中的天花板实现,源码实现】

这篇具有很好参考价值的文章主要介绍了【D3.js Tidy tree绘制树形图,单棵树,左右树,平移,拖拽,树形中的天花板实现,源码实现】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

D3.js Tidy tree绘制树形图,单棵树,左右树,平移,拖拽,树形中的天花板实现,源码实现

D3 简介

D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准,可以不需要其他任何框架独立运行在现代浏览器中,它结合强大的可视化组件来驱动 DOM 操作。

JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼。D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度。由于它本质上是 JavaScript ,所以用 JavaScript 也是可以实现所有功能的,但它能大大减小你的工作量,尤其是在数据可视化方面,D3 已经将生成可视化的复杂步骤精简到了几个简单的函数,你只需要输入几个简单的数据,就能够转换为各种绚丽的图形。有过 JavaScript 基础的朋友一定很容易理解它。

D3 官网有很多例子,这里说的是Tidy tree[树形图表svg]

官网给的样子是下面这个样子的, 但是描述多种关系的时候就尴尬了, 可调整左->右, 右->左,上->下,下->上.但是需要的是中间关联两边如:[左侧关系->中间对象<-右侧关系 ]关联模式,只能自己实现了.
d3.js树状图,JAVA精华,UI鉴赏,D3.js,D3 绘制树形,tidy tree,树形图表

[左侧关系->中间对象<-右侧关系 ] 树形实现

  1. 效果图,使用测试数据,实际调整数据源即可
    d3.js树状图,JAVA精华,UI鉴赏,D3.js,D3 绘制树形,tidy tree,树形图表

  2. HTML代码

  <div id="chartSvgObjectPanel" style="overflow: hidden; "></div>
  1. D3代码

			var tidyTreeChart = function () {
                // Compute the tree height; this approach will allow the height of the
                // SVG to scale according to the breadth (width) of the tree layout.
                const root = d3.hierarchy(data);
                const dx = 10;
                const dy = width / (root.height + 1);
                const moveX = width - (dy / 3); // 向右侧偏移

                // Create a tree layout.
                const tree = d3.tree().nodeSize([dx, dy]);

                // Sort the tree and apply the layout.
                root.sort((a, b) => d3.ascending(a.data.name, b.data.name));
                tree(root);

                // Compute the extent of the tree. Note that x and y are swapped here
                // because in the tree layout, x is the breadth, but when displayed, the
                // tree extends right rather than down.
                let x0 = Infinity;
                let x1 = -x0;
                root.each(d => {
                    if (d.x > x1) x1 = d.x;
                    if (d.x < x0) x0 = d.x;
                });

                // Compute the adjusted height of the tree.
                const height = x1 - x0 + dx * 2;
                var w = width + moveX;

                // 拖拽及扩大缩放
                const svg = d3.create("svg")
                    .attr("width", w)
                    .attr("height", height)
                    .attr("viewBox", [-dy / 3, x0 - dx, w, height])
                    .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");

                // --------------------------------------------------------
                // -- 左侧绘制
                // --------------------------------------------------------

                //创建一个贝塞尔生成曲线生成器
                var left_curve_generator = d3.linkHorizontal()
                    .x(function (d) {
                        return d.y;
                    })
                    .y(function (d) {
                        return d.x;
                    });


                // 添加箭头
                svg.append("defs")
                    .selectAll("marker")
                    .data(root.links())
                    .join("marker")
                    .attr("id", (d, i) => `line-left-${i}`)
                    .attr("viewBox", "0 -5 10 10")
                    // 箭头偏移
                    .attr("refX", 8)
                    .attr("refY", 0)
                    .attr("markerWidth", 6)
                    .attr("markerHeight", 6)
                    .attr("orient", "auto")
                    .append("path")
                    .attr("fill", "rgba(182,181,181,0.98)")
                    // .attr("d", "M0,-5L10,0L0,5");
                    .attr("d", "M 0 3 L 0 3 C 1 1 1 -1 0 -3 C 3 -1 3 -1 5 0 C 3 1 3 1 0 3");

                const linkLeft = svg.append("g")
                    .attr("fill", "none")
                    .attr("stroke", "#555")
                    .attr("stroke-opacity", 0.4)
                    .attr("stroke-width", 1.5)
                    .selectAll()
                    .data(root.links())
                    .join("path")
                    .attr("d", function (d) {
                        var start = {x: d.source.x, y: moveX - d.source.y};// *****使用treeWidth减去当前y,实现反转
                        var end = {x: d.target.x, y: moveX - d.target.y};  // *****使用treeWidth减去当前y,实现反转
                        return left_curve_generator({source: start, target: end});
                    })
                    .attr("marker-end", (d, i) => `url(#line-left-${i})`)
                ;

                const nodeLeft = svg.append("g")
                    .attr("stroke-linejoin", "round")
                    .attr("stroke-width", 3)
                    .selectAll()
                    .data(root.descendants())
                    .join("g")
                    .attr("transform", d => `translate(${moveX - d.y},${d.x})`);

                nodeLeft.append("circle")
                    .attr("fill", d => d.children ? "#8e36ad" : "#999")
                    .attr("stroke", "#fdbc17")
                    .attr("stroke-width", 1)
                    .attr("r", 2.5);

                nodeLeft.append("text")
                    .attr("dy", "0.31em")
                    .attr("x", function (d, i) {
                        return d.children ? 8 : -8;
                    })
                    .attr("text-anchor", d => d.children ? "start" : "end")
                    .text(function (d, i) {
                        // console.info(d, i);
                        // 左侧第一层不添加名称, 右侧添加,只要添加一次就好
                        if (d.depth > 0) {
                            return d.data.name;
                        } else {
                            return "";
                        }
                    })
                    // .attr("stroke", "white")
                    .attr("paint-order", "stroke");

                // --------------------------------------------------------
                // -- 右侧绘制
                // --------------------------------------------------------
                // 添加箭头
                svg.append("defs")
                    .selectAll("marker")
                    .data(root.links())
                    .join("marker")
                    .attr("id", (d, i) => `line-right-${i}`)
                    .attr("viewBox", "0 -5 10 10")
                    // 箭头偏移
                    .attr("refX", 8)
                    .attr("refY", 0)
                    .attr("markerWidth", 6)
                    .attr("markerHeight", 6)
                    .attr("orient", "auto")
                    .append("path")
                    .attr("fill", "rgba(182,181,181,0.98)")
                    // .attr("d", "M0,-5L10,0L0,5");
                    .attr("d", "M 0 3 L 0 3 C 1 1 1 -1 0 -3 C 3 -1 3 -1 5 0 C 3 1 3 1 0 3");

                const link = svg.append("g")
                    .attr("fill", "none")
                    .attr("stroke", "#555")
                    .attr("stroke-opacity", 0.4)
                    .attr("stroke-width", 1.5)
                    .selectAll()
                    .data(root.links())
                    .join("path")
                    .attr("d", d3.linkHorizontal()
                        .x(d => d.y + moveX)
                        .y(d => d.x))
                    .attr("marker-end", (d, i) => `url(#line-right-${i})`)
                ;

                const node = svg.append("g")
                    .attr("stroke-linejoin", "round")
                    .attr("stroke-width", 3)
                    .selectAll()
                    .data(root.descendants())
                    .join("g")
                    .attr("transform", d => `translate(${d.y + moveX},${d.x})`);

                node.append("circle")
                    .attr("fill", d => d.children ? "#8e36ad" : "#999")
                    .attr("stroke", "#28936c")
                    .attr("stroke-width", 1)
                    .attr("r", 2.5);

                node.append("text")
                    .attr("dy", "0.31em")
                    .attr("x", d => d.children ? -8 : 8)
                    .attr("text-anchor", d => d.children ? "end" : "start")
                    .text(d => d.data.name)
                    // .attr("stroke", "white")
                    .attr("paint-order", "stroke");

                return svg.node();
            }

  1. D3 svg内部节点拖动 平移,d3 tree 中没有提供拖拽功能参考,很多资料文档平移拖拽使用的是:
    svg.attr(“transform”, event.transform);
    svg.attr(“transform”, transofrm.translate(curTranslate.x, curTranslate.y));
    类似这种方式, 其实是错误的或者说异常的, 明显的效果是拖一拖你连图形都不知道哪里去了,简直是忍者,神出鬼没的方式.
// 拖拽平移
                svg.call(d3.zoom()
                    // 限制缩放比例
                    .scaleExtent([0.1, 15])
                    .on("zoom",
                        t => {

                            // ----------------------------------------
                            // -- 左侧
                            // ----------------------------------------

                            linkLeft.attr('transform', d3.zoomTransform(svg.node()));
                            nodeLeft.attr('transform', d3.zoomTransform(svg.node()));
                            // 文字移动
                            nodeLeft.selectAll('text')
                                .attr("x", (d) => {
                                    return moveX - d.y + (d.children ? 8 : -8);
                                })
                                .attr("y", (d) => {
                                    return d.x;
                                });
                            nodeLeft.selectAll('circle')
                                .attr("cx", (d) => {
                                    return moveX - d.y;
                                })
                                .attr("cy", (d) => {
                                    return d.x;
                                });

                            // ----------------------------------------
                            // -- 右侧
                            // ----------------------------------------

                            link.attr('transform', d3.zoomTransform(svg.node()));
                            node.attr('transform', d3.zoomTransform(svg.node()));
                            // 文字移动
                            node.selectAll('text')
                                .attr("x", (d) => {
                                    return d.y + moveX + (d.children ? -8 : 8);
                                })
                                .attr("y", (d) => {
                                    return d.x;
                                });
                            node.selectAll('circle')
                                .attr("cx", (d) => {
                                    return d.y + moveX;
                                })
                                .attr("cy", (d) => {
                                    return d.x;
                                });

                            // 缩放比例
                            // console.info("缩放比例:" + t.transform.k);
                            d3.select("#svg-scale").text((t.transform.k * 100.00).toFixed(2));
                        })
                );
  1. 测试数据源
var data = {
                    "name": "flare",
                    "children": [
                        {
                            "name": "analytics",
                            "children": [
                                {
                                    "name": "cluster",
                                    "children": [
                                        {"name": "AgglomerativeCluster", "size": 3938},
                                        {"name": "CommunityStructure", "size": 3812},
                                        {"name": "HierarchicalCluster", "size": 6714},
                                        {"name": "MergeEdge", "size": 743}
                                    ]
                                },
                                {
                                    "name": "graph",
                                    "children": [
                                        {"name": "BetweennessCentrality", "size": 3534},
                                        {"name": "LinkDistance", "size": 5731},
                                        {"name": "MaxFlowMinCut", "size": 7840},
                                        {"name": "ShortestPaths", "size": 5914},
                                        {"name": "SpanningTree", "size": 3416}
                                    ]
                                },
                                {
                                    "name": "optimization",
                                    "children": [
                                        {"name": "AspectRatioBanker", "size": 7074}
                                    ]
                                }
                            ]
                        },
                        {
                            "name": "animate",
                            "children": [
                                {"name": "Easing", "size": 17010},
                                {"name": "FunctionSequence", "size": 5842},
                                {
                                    "name": "interpolate",
                                    "children": [
                                        {"name": "ArrayInterpolator", "size": 1983},
                                        {"name": "ColorInterpolator", "size": 2047},
                                        {"name": "DateInterpolator", "size": 1375},
                                        {"name": "Interpolator", "size": 8746},
                                        {"name": "MatrixInterpolator", "size": 2202},
                                        {"name": "NumberInterpolator", "size": 1382},
                                        {"name": "ObjectInterpolator", "size": 1629},
                                        {"name": "PointInterpolator", "size": 1675},
                                        {"name": "RectangleInterpolator", "size": 2042}
                                    ]
                                },
                                {"name": "ISchedulable", "size": 1041},
                                {"name": "Parallel", "size": 5176},
                                {"name": "Pause", "size": 449},
                                {"name": "Scheduler", "size": 5593},
                                {"name": "Sequence", "size": 5534},
                                {"name": "Transition", "size": 9201},
                                {"name": "Transitioner", "size": 19975},
                                {"name": "TransitionEvent", "size": 1116},
                                {"name": "Tween", "size": 6006}
                            ]
                        },
                        {
                            "name": "data",
                            "children": [
                                {
                                    "name": "converters",
                                    "children": [
                                        {"name": "Converters", "size": 721},
                                        {"name": "DelimitedTextConverter", "size": 4294},
                                        {"name": "GraphMLConverter", "size": 9800},
                                        {"name": "IDataConverter", "size": 1314},
                                        {"name": "JSONConverter", "size": 2220}
                                    ]
                                },
                                {"name": "DataField", "size": 1759},
                                {"name": "DataSchema", "size": 2165},
                                {"name": "DataSet", "size": 586},
                                {"name": "DataSource", "size": 3331},
                                {"name": "DataTable", "size": 772},
                                {"name": "DataUtil", "size": 3322}
                            ]
                        },
                        {
                            "name": "display",
                            "children": [
                                {"name": "DirtySprite", "size": 8833},
                                {"name": "LineSprite", "size": 1732},
                                {"name": "RectSprite", "size": 3623},
                                {"name": "TextSprite", "size": 10066}
                            ]
                        },
                        {
                            "name": "flex",
                            "children": [
                                {"name": "FlareVis", "size": 4116}
                            ]
                        },
                        {
                            "name": "physics",
                            "children": [
                                {"name": "DragForce", "size": 1082},
                                {"name": "GravityForce", "size": 1336},
                                {"name": "IForce", "size": 319},
                                {"name": "NBodyForce", "size": 10498},
                                {"name": "Particle", "size": 2822},
                                {"name": "Simulation", "size": 9983},
                                {"name": "Spring", "size": 2213},
                                {"name": "SpringForce", "size": 1681}
                            ]
                        },
                        {
                            "name": "query",
                            "children": [
                                {"name": "AggregateExpression", "size": 1616},
                                {"name": "And", "size": 1027},
                                {"name": "Arithmetic", "size": 3891},
                                {"name": "Average", "size": 891},
                                {"name": "BinaryExpression", "size": 2893},
                                {"name": "Comparison", "size": 5103},
                                {"name": "CompositeExpression", "size": 3677},
                                {"name": "Count", "size": 781},
                                {"name": "DateUtil", "size": 4141},
                                {"name": "Distinct", "size": 933},
                                {"name": "Expression", "size": 5130},
                                {"name": "ExpressionIterator", "size": 3617},
                                {"name": "Fn", "size": 3240},
                                {"name": "If", "size": 2732},
                                {"name": "IsA", "size": 2039},
                                {"name": "Literal", "size": 1214},
                                {"name": "Match", "size": 3748},
                                {"name": "Maximum", "size": 843},
                                {
                                    "name": "methods",
                                    "children": [
                                        {"name": "add", "size": 593},
                                        {"name": "and", "size": 330},
                                        {"name": "average", "size": 287},
                                        {"name": "count", "size": 277},
                                        {"name": "distinct", "size": 292},
                                        {"name": "div", "size": 595},
                                        {"name": "eq", "size": 594},
                                        {"name": "fn", "size": 460},
                                        {"name": "gt", "size": 603},
                                        {"name": "gte", "size": 625},
                                        {"name": "iff", "size": 748},
                                        {"name": "isa", "size": 461},
                                        {"name": "lt", "size": 597},
                                        {"name": "lte", "size": 619},
                                        {"name": "max", "size": 283},
                                        {"name": "min", "size": 283},
                                        {"name": "mod", "size": 591},
                                        {"name": "mul", "size": 603},
                                        {"name": "neq", "size": 599},
                                        {"name": "not", "size": 386},
                                        {"name": "or", "size": 323},
                                        {"name": "orderby", "size": 307},
                                        {"name": "range", "size": 772},
                                        {"name": "select", "size": 296},
                                        {"name": "stddev", "size": 363},
                                        {"name": "sub", "size": 600},
                                        {"name": "sum", "size": 280},
                                        {"name": "update", "size": 307},
                                        {"name": "variance", "size": 335},
                                        {"name": "where", "size": 299},
                                        {"name": "xor", "size": 354},
                                        {"name": "_", "size": 264}
                                    ]
                                },
                                {"name": "Minimum", "size": 843},
                                {"name": "Not", "size": 1554},
                                {"name": "Or", "size": 970},
                                {"name": "Query", "size": 13896},
                                {"name": "Range", "size": 1594},
                                {"name": "StringUtil", "size": 4130},
                                {"name": "Sum", "size": 791},
                                {"name": "Variable", "size": 1124},
                                {"name": "Variance", "size": 1876},
                                {"name": "Xor", "size": 1101}
                            ]
                        },
                        {
                            "name": "scale",
                            "children": [
                                {"name": "IScaleMap", "size": 2105},
                                {"name": "LinearScale", "size": 1316},
                                {"name": "LogScale", "size": 3151},
                                {"name": "OrdinalScale", "size": 3770},
                                {"name": "QuantileScale", "size": 2435},
                                {"name": "QuantitativeScale", "size": 4839},
                                {"name": "RootScale", "size": 1756},
                                {"name": "Scale", "size": 4268},
                                {"name": "ScaleType", "size": 1821},
                                {"name": "TimeScale", "size": 5833}
                            ]
                        },
                        {
                            "name": "util",
                            "children": [
                                {"name": "Arrays", "size": 8258},
                                {"name": "Colors", "size": 10001},
                                {"name": "Dates", "size": 8217},
                                {"name": "Displays", "size": 12555},
                                {"name": "Filter", "size": 2324},
                                {"name": "Geometry", "size": 10993},
                                {
                                    "name": "heap",
                                    "children": [
                                        {"name": "FibonacciHeap", "size": 9354},
                                        {"name": "HeapNode", "size": 1233}
                                    ]
                                },
                                {"name": "IEvaluable", "size": 335},
                                {"name": "IPredicate", "size": 383},
                                {"name": "IValueProxy", "size": 874},
                                {
                                    "name": "math",
                                    "children": [
                                        {"name": "DenseMatrix", "size": 3165},
                                        {"name": "IMatrix", "size": 2815},
                                        {"name": "SparseMatrix", "size": 3366}
                                    ]
                                },
                                {"name": "Maths", "size": 17705},
                                {"name": "Orientation", "size": 1486},
                                {
                                    "name": "palette",
                                    "children": [
                                        {"name": "ColorPalette", "size": 6367},
                                        {"name": "Palette", "size": 1229},
                                        {"name": "ShapePalette", "size": 2059},
                                        {"name": "SizePalette", "size": 2291}
                                    ]
                                },
                                {"name": "Property", "size": 5559},
                                {"name": "Shapes", "size": 19118},
                                {"name": "Sort", "size": 6887},
                                {"name": "Stats", "size": 6557},
                                {"name": "Strings", "size": 22026}
                            ]
                        },
                        {
                            "name": "vis",
                            "children": [
                                {
                                    "name": "axis",
                                    "children": [
                                        {"name": "Axes", "size": 1302},
                                        {"name": "Axis", "size": 24593},
                                        {"name": "AxisGridLine", "size": 652},
                                        {"name": "AxisLabel", "size": 636},
                                        {"name": "CartesianAxes", "size": 6703}
                                    ]
                                },
                                {
                                    "name": "controls",
                                    "children": [
                                        {"name": "AnchorControl", "size": 2138},
                                        {"name": "ClickControl", "size": 3824},
                                        {"name": "Control", "size": 1353},
                                        {"name": "ControlList", "size": 4665},
                                        {"name": "DragControl", "size": 2649},
                                        {"name": "ExpandControl", "size": 2832},
                                        {"name": "HoverControl", "size": 4896},
                                        {"name": "IControl", "size": 763},
                                        {"name": "PanZoomControl", "size": 5222},
                                        {"name": "SelectionControl", "size": 7862},
                                        {"name": "TooltipControl", "size": 8435}
                                    ]
                                },
                                {
                                    "name": "data",
                                    "children": [
                                        {"name": "Data", "size": 20544},
                                        {"name": "DataList", "size": 19788},
                                        {"name": "DataSprite", "size": 10349},
                                        {"name": "EdgeSprite", "size": 3301},
                                        {"name": "NodeSprite", "size": 19382},
                                        {
                                            "name": "render",
                                            "children": [
                                                {"name": "ArrowType", "size": 698},
                                                {"name": "EdgeRenderer", "size": 5569},
                                                {"name": "IRenderer", "size": 353},
                                                {"name": "ShapeRenderer", "size": 2247}
                                            ]
                                        },
                                        {"name": "ScaleBinding", "size": 11275},
                                        {"name": "Tree", "size": 7147},
                                        {"name": "TreeBuilder", "size": 9930}
                                    ]
                                },
                                {
                                    "name": "events",
                                    "children": [
                                        {"name": "DataEvent", "size": 2313},
                                        {"name": "SelectionEvent", "size": 1880},
                                        {"name": "TooltipEvent", "size": 1701},
                                        {"name": "VisualizationEvent", "size": 1117}
                                    ]
                                },
                                {
                                    "name": "legend",
                                    "children": [
                                        {"name": "Legend", "size": 20859},
                                        {"name": "LegendItem", "size": 4614},
                                        {"name": "LegendRange", "size": 10530}
                                    ]
                                },
                                {
                                    "name": "operator",
                                    "children": [
                                        {
                                            "name": "distortion",
                                            "children": [
                                                {"name": "BifocalDistortion", "size": 4461},
                                                {"name": "Distortion", "size": 6314},
                                                {"name": "FisheyeDistortion", "size": 3444}
                                            ]
                                        },
                                        {
                                            "name": "encoder",
                                            "children": [
                                                {"name": "ColorEncoder", "size": 3179},
                                                {"name": "Encoder", "size": 4060},
                                                {"name": "PropertyEncoder", "size": 4138},
                                                {"name": "ShapeEncoder", "size": 1690},
                                                {"name": "SizeEncoder", "size": 1830}
                                            ]
                                        },
                                        {
                                            "name": "filter",
                                            "children": [
                                                {"name": "FisheyeTreeFilter", "size": 5219},
                                                {"name": "GraphDistanceFilter", "size": 3165},
                                                {"name": "VisibilityFilter", "size": 3509}
                                            ]
                                        },
                                        {"name": "IOperator", "size": 1286},
                                        {
                                            "name": "label",
                                            "children": [
                                                {"name": "Labeler", "size": 9956},
                                                {"name": "RadialLabeler", "size": 3899},
                                                {"name": "StackedAreaLabeler", "size": 3202}
                                            ]
                                        },
                                        {
                                            "name": "layout",
                                            "children": [
                                                {"name": "AxisLayout", "size": 6725},
                                                {"name": "BundledEdgeRouter", "size": 3727},
                                                {"name": "CircleLayout", "size": 9317},
                                                {"name": "CirclePackingLayout", "size": 12003},
                                                {"name": "DendrogramLayout", "size": 4853},
                                                {"name": "ForceDirectedLayout", "size": 8411},
                                                {"name": "IcicleTreeLayout", "size": 4864},
                                                {"name": "IndentedTreeLayout", "size": 3174},
                                                {"name": "Layout", "size": 7881},
                                                {"name": "NodeLinkTreeLayout", "size": 12870},
                                                {"name": "PieLayout", "size": 2728},
                                                {"name": "RadialTreeLayout", "size": 12348},
                                                {"name": "RandomLayout", "size": 870},
                                                {"name": "StackedAreaLayout", "size": 9121},
                                                {"name": "TreeMapLayout", "size": 9191}
                                            ]
                                        },
                                        {"name": "Operator", "size": 2490},
                                        {"name": "OperatorList", "size": 5248},
                                        {"name": "OperatorSequence", "size": 4190},
                                        {"name": "OperatorSwitch", "size": 2581},
                                        {"name": "SortOperator", "size": 2023}
                                    ]
                                },
                                {"name": "Visualization", "size": 16540}
                            ]
                        }
                    ]
                };
  1. 完整实例代码
  $(document).ready(function () {
            var data = {
                    "name": "flare",
                    "children": [
                        {
                            "name": "analytics",
                            "children": [
                                {
                                    "name": "cluster",
                                    "children": [
                                        {"name": "AgglomerativeCluster", "size": 3938},
                                        {"name": "CommunityStructure", "size": 3812},
                                        {"name": "HierarchicalCluster", "size": 6714},
                                        {"name": "MergeEdge", "size": 743}
                                    ]
                                },
                                {
                                    "name": "graph",
                                    "children": [
                                        {"name": "BetweennessCentrality", "size": 3534},
                                        {"name": "LinkDistance", "size": 5731},
                                        {"name": "MaxFlowMinCut", "size": 7840},
                                        {"name": "ShortestPaths", "size": 5914},
                                        {"name": "SpanningTree", "size": 3416}
                                    ]
                                },
                                {
                                    "name": "optimization",
                                    "children": [
                                        {"name": "AspectRatioBanker", "size": 7074}
                                    ]
                                }
                            ]
                        },
                        {
                            "name": "animate",
                            "children": [
                                {"name": "Easing", "size": 17010},
                                {"name": "FunctionSequence", "size": 5842},
                                {
                                    "name": "interpolate",
                                    "children": [
                                        {"name": "ArrayInterpolator", "size": 1983},
                                        {"name": "ColorInterpolator", "size": 2047},
                                        {"name": "DateInterpolator", "size": 1375},
                                        {"name": "Interpolator", "size": 8746},
                                        {"name": "MatrixInterpolator", "size": 2202},
                                        {"name": "NumberInterpolator", "size": 1382},
                                        {"name": "ObjectInterpolator", "size": 1629},
                                        {"name": "PointInterpolator", "size": 1675},
                                        {"name": "RectangleInterpolator", "size": 2042}
                                    ]
                                },
                                {"name": "ISchedulable", "size": 1041},
                                {"name": "Parallel", "size": 5176},
                                {"name": "Pause", "size": 449},
                                {"name": "Scheduler", "size": 5593},
                                {"name": "Sequence", "size": 5534},
                                {"name": "Transition", "size": 9201},
                                {"name": "Transitioner", "size": 19975},
                                {"name": "TransitionEvent", "size": 1116},
                                {"name": "Tween", "size": 6006}
                            ]
                        },
                        {
                            "name": "data",
                            "children": [
                                {
                                    "name": "converters",
                                    "children": [
                                        {"name": "Converters", "size": 721},
                                        {"name": "DelimitedTextConverter", "size": 4294},
                                        {"name": "GraphMLConverter", "size": 9800},
                                        {"name": "IDataConverter", "size": 1314},
                                        {"name": "JSONConverter", "size": 2220}
                                    ]
                                },
                                {"name": "DataField", "size": 1759},
                                {"name": "DataSchema", "size": 2165},
                                {"name": "DataSet", "size": 586},
                                {"name": "DataSource", "size": 3331},
                                {"name": "DataTable", "size": 772},
                                {"name": "DataUtil", "size": 3322}
                            ]
                        },
                        {
                            "name": "display",
                            "children": [
                                {"name": "DirtySprite", "size": 8833},
                                {"name": "LineSprite", "size": 1732},
                                {"name": "RectSprite", "size": 3623},
                                {"name": "TextSprite", "size": 10066}
                            ]
                        },
                        {
                            "name": "flex",
                            "children": [
                                {"name": "FlareVis", "size": 4116}
                            ]
                        },
                        {
                            "name": "physics",
                            "children": [
                                {"name": "DragForce", "size": 1082},
                                {"name": "GravityForce", "size": 1336},
                                {"name": "IForce", "size": 319},
                                {"name": "NBodyForce", "size": 10498},
                                {"name": "Particle", "size": 2822},
                                {"name": "Simulation", "size": 9983},
                                {"name": "Spring", "size": 2213},
                                {"name": "SpringForce", "size": 1681}
                            ]
                        },
                        {
                            "name": "query",
                            "children": [
                                {"name": "AggregateExpression", "size": 1616},
                                {"name": "And", "size": 1027},
                                {"name": "Arithmetic", "size": 3891},
                                {"name": "Average", "size": 891},
                                {"name": "BinaryExpression", "size": 2893},
                                {"name": "Comparison", "size": 5103},
                                {"name": "CompositeExpression", "size": 3677},
                                {"name": "Count", "size": 781},
                                {"name": "DateUtil", "size": 4141},
                                {"name": "Distinct", "size": 933},
                                {"name": "Expression", "size": 5130},
                                {"name": "ExpressionIterator", "size": 3617},
                                {"name": "Fn", "size": 3240},
                                {"name": "If", "size": 2732},
                                {"name": "IsA", "size": 2039},
                                {"name": "Literal", "size": 1214},
                                {"name": "Match", "size": 3748},
                                {"name": "Maximum", "size": 843},
                                {
                                    "name": "methods",
                                    "children": [
                                        {"name": "add", "size": 593},
                                        {"name": "and", "size": 330},
                                        {"name": "average", "size": 287},
                                        {"name": "count", "size": 277},
                                        {"name": "distinct", "size": 292},
                                        {"name": "div", "size": 595},
                                        {"name": "eq", "size": 594},
                                        {"name": "fn", "size": 460},
                                        {"name": "gt", "size": 603},
                                        {"name": "gte", "size": 625},
                                        {"name": "iff", "size": 748},
                                        {"name": "isa", "size": 461},
                                        {"name": "lt", "size": 597},
                                        {"name": "lte", "size": 619},
                                        {"name": "max", "size": 283},
                                        {"name": "min", "size": 283},
                                        {"name": "mod", "size": 591},
                                        {"name": "mul", "size": 603},
                                        {"name": "neq", "size": 599},
                                        {"name": "not", "size": 386},
                                        {"name": "or", "size": 323},
                                        {"name": "orderby", "size": 307},
                                        {"name": "range", "size": 772},
                                        {"name": "select", "size": 296},
                                        {"name": "stddev", "size": 363},
                                        {"name": "sub", "size": 600},
                                        {"name": "sum", "size": 280},
                                        {"name": "update", "size": 307},
                                        {"name": "variance", "size": 335},
                                        {"name": "where", "size": 299},
                                        {"name": "xor", "size": 354},
                                        {"name": "_", "size": 264}
                                    ]
                                },
                                {"name": "Minimum", "size": 843},
                                {"name": "Not", "size": 1554},
                                {"name": "Or", "size": 970},
                                {"name": "Query", "size": 13896},
                                {"name": "Range", "size": 1594},
                                {"name": "StringUtil", "size": 4130},
                                {"name": "Sum", "size": 791},
                                {"name": "Variable", "size": 1124},
                                {"name": "Variance", "size": 1876},
                                {"name": "Xor", "size": 1101}
                            ]
                        },
                        {
                            "name": "scale",
                            "children": [
                                {"name": "IScaleMap", "size": 2105},
                                {"name": "LinearScale", "size": 1316},
                                {"name": "LogScale", "size": 3151},
                                {"name": "OrdinalScale", "size": 3770},
                                {"name": "QuantileScale", "size": 2435},
                                {"name": "QuantitativeScale", "size": 4839},
                                {"name": "RootScale", "size": 1756},
                                {"name": "Scale", "size": 4268},
                                {"name": "ScaleType", "size": 1821},
                                {"name": "TimeScale", "size": 5833}
                            ]
                        },
                        {
                            "name": "util",
                            "children": [
                                {"name": "Arrays", "size": 8258},
                                {"name": "Colors", "size": 10001},
                                {"name": "Dates", "size": 8217},
                                {"name": "Displays", "size": 12555},
                                {"name": "Filter", "size": 2324},
                                {"name": "Geometry", "size": 10993},
                                {
                                    "name": "heap",
                                    "children": [
                                        {"name": "FibonacciHeap", "size": 9354},
                                        {"name": "HeapNode", "size": 1233}
                                    ]
                                },
                                {"name": "IEvaluable", "size": 335},
                                {"name": "IPredicate", "size": 383},
                                {"name": "IValueProxy", "size": 874},
                                {
                                    "name": "math",
                                    "children": [
                                        {"name": "DenseMatrix", "size": 3165},
                                        {"name": "IMatrix", "size": 2815},
                                        {"name": "SparseMatrix", "size": 3366}
                                    ]
                                },
                                {"name": "Maths", "size": 17705},
                                {"name": "Orientation", "size": 1486},
                                {
                                    "name": "palette",
                                    "children": [
                                        {"name": "ColorPalette", "size": 6367},
                                        {"name": "Palette", "size": 1229},
                                        {"name": "ShapePalette", "size": 2059},
                                        {"name": "SizePalette", "size": 2291}
                                    ]
                                },
                                {"name": "Property", "size": 5559},
                                {"name": "Shapes", "size": 19118},
                                {"name": "Sort", "size": 6887},
                                {"name": "Stats", "size": 6557},
                                {"name": "Strings", "size": 22026}
                            ]
                        },
                        {
                            "name": "vis",
                            "children": [
                                {
                                    "name": "axis",
                                    "children": [
                                        {"name": "Axes", "size": 1302},
                                        {"name": "Axis", "size": 24593},
                                        {"name": "AxisGridLine", "size": 652},
                                        {"name": "AxisLabel", "size": 636},
                                        {"name": "CartesianAxes", "size": 6703}
                                    ]
                                },
                                {
                                    "name": "controls",
                                    "children": [
                                        {"name": "AnchorControl", "size": 2138},
                                        {"name": "ClickControl", "size": 3824},
                                        {"name": "Control", "size": 1353},
                                        {"name": "ControlList", "size": 4665},
                                        {"name": "DragControl", "size": 2649},
                                        {"name": "ExpandControl", "size": 2832},
                                        {"name": "HoverControl", "size": 4896},
                                        {"name": "IControl", "size": 763},
                                        {"name": "PanZoomControl", "size": 5222},
                                        {"name": "SelectionControl", "size": 7862},
                                        {"name": "TooltipControl", "size": 8435}
                                    ]
                                },
                                {
                                    "name": "data",
                                    "children": [
                                        {"name": "Data", "size": 20544},
                                        {"name": "DataList", "size": 19788},
                                        {"name": "DataSprite", "size": 10349},
                                        {"name": "EdgeSprite", "size": 3301},
                                        {"name": "NodeSprite", "size": 19382},
                                        {
                                            "name": "render",
                                            "children": [
                                                {"name": "ArrowType", "size": 698},
                                                {"name": "EdgeRenderer", "size": 5569},
                                                {"name": "IRenderer", "size": 353},
                                                {"name": "ShapeRenderer", "size": 2247}
                                            ]
                                        },
                                        {"name": "ScaleBinding", "size": 11275},
                                        {"name": "Tree", "size": 7147},
                                        {"name": "TreeBuilder", "size": 9930}
                                    ]
                                },
                                {
                                    "name": "events",
                                    "children": [
                                        {"name": "DataEvent", "size": 2313},
                                        {"name": "SelectionEvent", "size": 1880},
                                        {"name": "TooltipEvent", "size": 1701},
                                        {"name": "VisualizationEvent", "size": 1117}
                                    ]
                                },
                                {
                                    "name": "legend",
                                    "children": [
                                        {"name": "Legend", "size": 20859},
                                        {"name": "LegendItem", "size": 4614},
                                        {"name": "LegendRange", "size": 10530}
                                    ]
                                },
                                {
                                    "name": "operator",
                                    "children": [
                                        {
                                            "name": "distortion",
                                            "children": [
                                                {"name": "BifocalDistortion", "size": 4461},
                                                {"name": "Distortion", "size": 6314},
                                                {"name": "FisheyeDistortion", "size": 3444}
                                            ]
                                        },
                                        {
                                            "name": "encoder",
                                            "children": [
                                                {"name": "ColorEncoder", "size": 3179},
                                                {"name": "Encoder", "size": 4060},
                                                {"name": "PropertyEncoder", "size": 4138},
                                                {"name": "ShapeEncoder", "size": 1690},
                                                {"name": "SizeEncoder", "size": 1830}
                                            ]
                                        },
                                        {
                                            "name": "filter",
                                            "children": [
                                                {"name": "FisheyeTreeFilter", "size": 5219},
                                                {"name": "GraphDistanceFilter", "size": 3165},
                                                {"name": "VisibilityFilter", "size": 3509}
                                            ]
                                        },
                                        {"name": "IOperator", "size": 1286},
                                        {
                                            "name": "label",
                                            "children": [
                                                {"name": "Labeler", "size": 9956},
                                                {"name": "RadialLabeler", "size": 3899},
                                                {"name": "StackedAreaLabeler", "size": 3202}
                                            ]
                                        },
                                        {
                                            "name": "layout",
                                            "children": [
                                                {"name": "AxisLayout", "size": 6725},
                                                {"name": "BundledEdgeRouter", "size": 3727},
                                                {"name": "CircleLayout", "size": 9317},
                                                {"name": "CirclePackingLayout", "size": 12003},
                                                {"name": "DendrogramLayout", "size": 4853},
                                                {"name": "ForceDirectedLayout", "size": 8411},
                                                {"name": "IcicleTreeLayout", "size": 4864},
                                                {"name": "IndentedTreeLayout", "size": 3174},
                                                {"name": "Layout", "size": 7881},
                                                {"name": "NodeLinkTreeLayout", "size": 12870},
                                                {"name": "PieLayout", "size": 2728},
                                                {"name": "RadialTreeLayout", "size": 12348},
                                                {"name": "RandomLayout", "size": 870},
                                                {"name": "StackedAreaLayout", "size": 9121},
                                                {"name": "TreeMapLayout", "size": 9191}
                                            ]
                                        },
                                        {"name": "Operator", "size": 2490},
                                        {"name": "OperatorList", "size": 5248},
                                        {"name": "OperatorSequence", "size": 4190},
                                        {"name": "OperatorSwitch", "size": 2581},
                                        {"name": "SortOperator", "size": 2023}
                                    ]
                                },
                                {"name": "Visualization", "size": 16540}
                            ]
                        }
                    ]
                };
                
            // 指定图表的尺寸。
            const width = 1000;
            const height = 600;

			/**
             * 树形向图
             */
            var tidyTreeChart = function () {
                // Compute the tree height; this approach will allow the height of the
                // SVG to scale according to the breadth (width) of the tree layout.
                const root = d3.hierarchy(data);
                const dx = 10;
                const dy = width / (root.height + 1);
                const moveX = width - (dy / 3); // 向右侧偏移

                // Create a tree layout.
                const tree = d3.tree().nodeSize([dx, dy]);

                // Sort the tree and apply the layout.
                root.sort((a, b) => d3.ascending(a.data.name, b.data.name));
                tree(root);

                // Compute the extent of the tree. Note that x and y are swapped here
                // because in the tree layout, x is the breadth, but when displayed, the
                // tree extends right rather than down.
                let x0 = Infinity;
                let x1 = -x0;
                root.each(d => {
                    if (d.x > x1) x1 = d.x;
                    if (d.x < x0) x0 = d.x;
                });

                // Compute the adjusted height of the tree.
                const height = x1 - x0 + dx * 2;
                var w = width + moveX;

                // 拖拽及扩大缩放
                const svg = d3.create("svg")
                    .attr("width", w)
                    .attr("height", height)
                    .attr("viewBox", [-dy / 3, x0 - dx, w, height])
                    .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");

                // 拖拽平移
                svg.call(d3.zoom()
                    // 限制缩放比例
                    .scaleExtent([0.1, 15])
                    .on("zoom",
                        t => {

                            // ----------------------------------------
                            // -- 左侧
                            // ----------------------------------------

                            linkLeft.attr('transform', d3.zoomTransform(svg.node()));
                            nodeLeft.attr('transform', d3.zoomTransform(svg.node()));
                            // 文字移动
                            nodeLeft.selectAll('text')
                                .attr("x", (d) => {
                                    return moveX - d.y + (d.children ? 8 : -8);
                                })
                                .attr("y", (d) => {
                                    return d.x;
                                });
                            nodeLeft.selectAll('circle')
                                .attr("cx", (d) => {
                                    return moveX - d.y;
                                })
                                .attr("cy", (d) => {
                                    return d.x;
                                });

                            // ----------------------------------------
                            // -- 右侧
                            // ----------------------------------------

                            link.attr('transform', d3.zoomTransform(svg.node()));
                            node.attr('transform', d3.zoomTransform(svg.node()));
                            // 文字移动
                            node.selectAll('text')
                                .attr("x", (d) => {
                                    return d.y + moveX + (d.children ? -8 : 8);
                                })
                                .attr("y", (d) => {
                                    return d.x;
                                });
                            node.selectAll('circle')
                                .attr("cx", (d) => {
                                    return d.y + moveX;
                                })
                                .attr("cy", (d) => {
                                    return d.x;
                                });

                            // 缩放比例
                            // console.info("缩放比例:" + t.transform.k);
                            d3.select("#svg-scale").text((t.transform.k * 100.00).toFixed(2));
                        })
                );

                // --------------------------------------------------------
                // -- 左侧绘制
                // --------------------------------------------------------

                //创建一个贝塞尔生成曲线生成器
                var left_curve_generator = d3.linkHorizontal()
                    .x(function (d) {
                        return d.y;
                    })
                    .y(function (d) {
                        return d.x;
                    });


                // 添加箭头
                svg.append("defs")
                    .selectAll("marker")
                    .data(root.links())
                    .join("marker")
                    .attr("id", (d, i) => `line-left-${i}`)
                    .attr("viewBox", "0 -5 10 10")
                    // 箭头偏移
                    .attr("refX", 8)
                    .attr("refY", 0)
                    .attr("markerWidth", 6)
                    .attr("markerHeight", 6)
                    .attr("orient", "auto")
                    .append("path")
                    .attr("fill", "rgba(182,181,181,0.98)")
                    // .attr("d", "M0,-5L10,0L0,5");
                    .attr("d", "M 0 3 L 0 3 C 1 1 1 -1 0 -3 C 3 -1 3 -1 5 0 C 3 1 3 1 0 3");

                const linkLeft = svg.append("g")
                    .attr("fill", "none")
                    .attr("stroke", "#555")
                    .attr("stroke-opacity", 0.4)
                    .attr("stroke-width", 1.5)
                    .selectAll()
                    .data(root.links())
                    .join("path")
                    .attr("d", function (d) {
                        var start = {x: d.source.x, y: moveX - d.source.y};// *****使用treeWidth减去当前y,实现反转
                        var end = {x: d.target.x, y: moveX - d.target.y};  // *****使用treeWidth减去当前y,实现反转
                        return left_curve_generator({source: start, target: end});
                    })
                    .attr("marker-end", (d, i) => `url(#line-left-${i})`)
                ;

                const nodeLeft = svg.append("g")
                    .attr("stroke-linejoin", "round")
                    .attr("stroke-width", 3)
                    .selectAll()
                    .data(root.descendants())
                    .join("g")
                    .attr("transform", d => `translate(${moveX - d.y},${d.x})`);

                nodeLeft.append("circle")
                    .attr("fill", d => d.children ? "#8e36ad" : "#999")
                    .attr("stroke", "#fdbc17")
                    .attr("stroke-width", 1)
                    .attr("r", 2.5);

                nodeLeft.append("text")
                    .attr("dy", "0.31em")
                    .attr("x", function (d, i) {
                        return d.children ? 8 : -8;
                    })
                    .attr("text-anchor", d => d.children ? "start" : "end")
                    .text(function (d, i) {
                        // console.info(d, i);
                        // 左侧第一层不添加名称, 右侧添加,只要添加一次就好
                        if (d.depth > 0) {
                            return d.data.name;
                        } else {
                            return "";
                        }
                    })
                    // .attr("stroke", "white")
                    .attr("paint-order", "stroke");

                // --------------------------------------------------------
                // -- 右侧绘制
                // --------------------------------------------------------
                // 添加箭头
                svg.append("defs")
                    .selectAll("marker")
                    .data(root.links())
                    .join("marker")
                    .attr("id", (d, i) => `line-right-${i}`)
                    .attr("viewBox", "0 -5 10 10")
                    // 箭头偏移
                    .attr("refX", 8)
                    .attr("refY", 0)
                    .attr("markerWidth", 6)
                    .attr("markerHeight", 6)
                    .attr("orient", "auto")
                    .append("path")
                    .attr("fill", "rgba(182,181,181,0.98)")
                    // .attr("d", "M0,-5L10,0L0,5");
                    .attr("d", "M 0 3 L 0 3 C 1 1 1 -1 0 -3 C 3 -1 3 -1 5 0 C 3 1 3 1 0 3");

                const link = svg.append("g")
                    .attr("fill", "none")
                    .attr("stroke", "#555")
                    .attr("stroke-opacity", 0.4)
                    .attr("stroke-width", 1.5)
                    .selectAll()
                    .data(root.links())
                    .join("path")
                    .attr("d", d3.linkHorizontal()
                        .x(d => d.y + moveX)
                        .y(d => d.x))
                    .attr("marker-end", (d, i) => `url(#line-right-${i})`)
                ;

                const node = svg.append("g")
                    .attr("stroke-linejoin", "round")
                    .attr("stroke-width", 3)
                    .selectAll()
                    .data(root.descendants())
                    .join("g")
                    .attr("transform", d => `translate(${d.y + moveX},${d.x})`);

                node.append("circle")
                    .attr("fill", d => d.children ? "#8e36ad" : "#999")
                    .attr("stroke", "#28936c")
                    .attr("stroke-width", 1)
                    .attr("r", 2.5);

                node.append("text")
                    .attr("dy", "0.31em")
                    .attr("x", d => d.children ? -8 : 8)
                    .attr("text-anchor", d => d.children ? "end" : "start")
                    .text(d => d.data.name)
                    // .attr("stroke", "white")
                    .attr("paint-order", "stroke");

                return svg.node();
            }

  			// 把创建的svg 添加到div容器中 默认方式
            $('#chartSvgObjectPanel').html( 
                tidyTreeChart()
            );
});
  1. 实际效果图
    d3.js树状图,JAVA精华,UI鉴赏,D3.js,D3 绘制树形,tidy tree,树形图表
    d3.js树状图,JAVA精华,UI鉴赏,D3.js,D3 绘制树形,tidy tree,树形图表
    d3.js树状图,JAVA精华,UI鉴赏,D3.js,D3 绘制树形,tidy tree,树形图表
    d3.js树状图,JAVA精华,UI鉴赏,D3.js,D3 绘制树形,tidy tree,树形图表
    d3.js树状图,JAVA精华,UI鉴赏,D3.js,D3 绘制树形,tidy tree,树形图表
    d3.js树状图,JAVA精华,UI鉴赏,D3.js,D3 绘制树形,tidy tree,树形图表

  2. 点赞+收藏+关注+好东西持续共享文章来源地址https://www.toymoban.com/news/detail-849213.html

到了这里,关于【D3.js Tidy tree绘制树形图,单棵树,左右树,平移,拖拽,树形中的天花板实现,源码实现】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • python绘制柱形图系列

    Python版本为:3.7.1;图表绘制包matplotlib、Seaborn、plotnine的版本分别为:2.2.3、0.9.0、0.5.1;数据处理包NumPy和Pandas的版本分别为:1.15.4和0.23.4。

    2024年02月08日
    浏览(40)
  • Matlab绘制中国区域DEM地形图

    要绘制中国区域的DEM地形图,需要经过以下详细步骤。在本例中,将使用MATLAB的Mapping Toolbox来处理DEM数据和绘制地形图,并选择一种美观的配色方案。 步骤1:准备DEM数据 首先,您需要准备一个包含中国区域DEM数据的文件。通常,DEM数据以高程值的矩阵形式存储。确保数据的

    2024年02月12日
    浏览(52)
  • 【Python】如何使用matlibplot绘制3D柱形图

    (1)构造需要显示的数据 如下图所示,X坐标取值为[0,1,2,3,4],Y坐标取值为[0,1,2,3,4,5,6,7,8],每一个(X,Y)组合的值Z=X+Y,所需要绘制的图就是在X,Y所对应的坐标位置上面根据Z的值来绘制柱形图。 (2)坐标设置 将坐标网格化, X=[0,1,2,3,4],Y=[0,1,2,3,4,5,6,7,8]网格化的结果,如下图

    2024年02月16日
    浏览(38)
  • 【Python】Python中使用Matplotlib绘制折线图、散点图、饼形图、柱形图和箱线图

    python数据可视化课程,实验二 Matplotlib 中文API:API 概览 | Matplotlib 一、实验任务的数据背景 提供的源数据(数据文件employee.csv)共拥有4个特征,分别为就业人员、第一产业就业人员、第二产业就业人员、第三产业就业人员。根据3个产业就业人员的数量绘制散点图和折线图。

    2023年04月15日
    浏览(96)
  • Matplotlib可视化数据分析图表下(常用图表的绘制、折线图、柱形图、直方图、饼形图、散点图、面积图、热力图、箱形图、3D图表、绘制多个图表、双y轴可视化图表、颜色渐变图)

    本文来自《Python数据分析从入门到精通》_明日科技编著 本节介绍常用图表的绘制,主要包括绘制折线图、绘制柱形图、绘制直方图、绘制饼形图、绘制散点图、绘制面积图、绘制热力图、绘制箱型图、绘制3D图表、绘制多个子图表以及图表的保存。对于常用的图表类型以绘制

    2023年04月23日
    浏览(56)
  • ElementUI之Tree树形控件使用

    以下列出的属性、事件、方法,可使用Tree控件实现节点的拖拽功能(可实现修改顺序、更换父级节点功能)、点击节点勾选复选框、只点击箭头图标展开和收缩节点、父子节点不级联勾选、默认展开全部节点功能 参数 说明 类型 可选值 默认值 data 展示数据 array 是 无 props 配

    2024年02月11日
    浏览(41)
  • elementUI Tree 树形控件单选实现

    在Element UI中,树形控件(el-tree)本身不支持单选功能。但是,你可以通过监听节点点击事件并手动更新选中状态来实现单选树。 以下是一个简单的例子,展示了如何实现单选功能: html相关: js方法: 义了一个currentNodeKey来存储当前选中节点的 key。每次点击节点时,我们首

    2024年03月25日
    浏览(54)
  • element-ui树形控件(tree)

    1.基础用法 通过:data绑定了数据源,通过:props绑定了属性绑定对象,其中label代表着我们看到的是哪个属性对应的值,children代表父子节点通过哪个属性实现嵌套的 2.为树形控件添加show-checkbox属性,可实现复选框效果。如果要求选中的是文本对应的id值,而不是文本值本身。可

    2024年02月13日
    浏览(63)
  • [vue3] Tree/TreeSelect树形控件使用

     ✨✨个人主页:沫洺的主页 📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏                             📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏                            📖Docker专栏📖Reids专栏📖MQ专栏📖SpringCl

    2024年02月08日
    浏览(52)
  • 78.(前端)分配权限页面显示——树形结构使用(Element-ui的Tree树形控件)

    在前端的操作中,应该增加修改、删除、分配权限的操作 这次主要是实现分配权限的显示!!!!!! 更换icon图标,并设计大小 绑定函数,点击弹出提示框(DIalog对话框) 在对话框内,应该显示一个树形结构提供选择(Tree树形控件) 初始化树形结构,并填充数据

    2024年02月05日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包