javascript 树形图

JavaScript树形图是一种常见的图标，它可以非常直观地表示出层级关系。它常用于显示网站菜单、目录结构和组织结构等。在本文中，我们将会介绍如何使用JavaScript树形图。

要创建树形图，我们需要先有一个数据结构来存储树形结构，一个常见的数据结构是嵌套对象或嵌套数组。以下是一个嵌套数组的例子：

const treeData = [{
label: 'Node 1',id: 'node1',children: [{
label: 'Node 1.1',id: 'node1.1',children: [{
label: 'Node 1.1.1',id: 'node1.1.1'}
,{
label: 'Node 1.1.2',id: 'node1.1.2'}
]}
,{
label: 'Node 1.2',id: 'node1.2'}
]}
,{
label: 'Node 2',id: 'node2',children: [{
label: 'Node 2.1',id: 'node2.1'}
]}
    ];

根据以上数据结构，我们可以创建一棵树形结构。以下是一个使用纯JavaScript代码生成树形图的例子：

function createTree(container, treeData) {
    container.innerHTML = '';
function createNode(nodeData) {
    const nodeEl = document.createElement('div');
    nodeEl.innerHTML = nodeData.label;
    nodeEl.dataset.id = nodeData.id;
if (nodeData.children) {
    const childrenContainer = document.createElement('div');
    childrenContainer.classList.add('children');
    parentEl.appendChild(childrenContainer);
    nodeData.children.forEach(childData =>
{
    const childEl = createNode(childData);
    childrenContainer.appendChild(childEl);
}
    );
}
    return nodeEl;
}
    treeData.forEach(nodeData =>
{
    const rootNodeEl = createNode(nodeData);
    container.appendChild(rootNodeEl);
}
    );
}
    const container = document.getElementById('tree-container');
    createTree(container, treeData);

在以上代码中，我们先定义了一个createTree()函数，它接受一个容器和一组数据作为参数，然后动态地生成树形结构。先通过循环创建每个根节点的HTML元素，然后再递归创建每个节点的子节点。

生成树形图的样式可以使用CSS来定义。以下是一个基于Bootstrap的树形样式：

.tree {
    padding-left: 20px;
}
.tree-node {
    position: relative;
}
.tree-node:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #dadce0;
    background-color: #fff;
    transform: translateX(-7px) translateY(7px);
    box-sizing: border-box;
}
.tree-node.selected:before {
    border: 1px solid #1e88e5;
    background-color: #1e88e5;
    color: #fff;
}
.tree-node .label {
    margin: 0;
    padding-left: 30px;
    font-weight: bold;
    cursor: pointer;
}
.tree-node .children {
    padding-left: 30px;
    margin: 10px 0 0 0;
    display: none;
}
.tree-node.expanded .children {
    display: block;
}

在以上代码中，我们使用了:before选择器来创建展开/折叠符号，用:before选择器来通过设置伪元素的样式来模拟真实元素的出现。其它的样式可以自行查阅Bootstrap的文档。

最后，我们可以添加一些交互效果。以下是一个基于jQuery的样例代码：

$('.tree-node .label').click(function() {
    const nodeEl = $(this).parent('.tree-node');
if (nodeEl.hasClass('expanded')) {
    nodeEl.removeClass('expanded');
}
 else {
    nodeEl.addClass('expanded');
}
}
    );
$('.tree-node .label').hover(function() {
    const nodeEl = $(this).parent('.tree-node');
    nodeEl.addClass('hover');
}
,function() {
    const nodeEl = $(this).parent('.tree-node');
    nodeEl.removeClass('hover');
}
    );
$('.tree-node').click(function() {
    const nodeId = $(this).data('id');
    $('.tree-node').removeClass('selected');
    $(this).addClass('selected');
// perform action based on selected node ID}
    );
    

在以上代码中，我们使用jQuery绑定了点击、悬停和选择事件。可以根据需要调整或添加更多的交互效果。

JavaScript树形图是一种非常有用的技术，使用它可以轻松地表示层级关系。可以根据以上例子，自定义一个适合自身网站的树形图，方便用户了解网站内容。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！