图表多层上下钻3：单次请求

关于多层上下钻我总结过一篇多次请求数据的，这次是一次性请求回来数据，一般是数据量比较少的情况，后台把嵌套数据全部返回给前端。虽然这种情况比较少，然而确实遇到了。由于大部分步骤一样，所以此篇建议和上篇一起看，能理解上篇这篇也差不多。

上篇的前四个步骤，一至三个步骤都是一样的。麻烦点在于一次性请求回来数据后，每次上钻都要前端来处理，而不是请求后台接口，所以与后台无关了。所以核心在第四个步骤：

四、面包屑导航点击事件的处理
先说一下数据结构，一次性请求回来后，数据结构可能是类似于这种：

let data = [
    {
        id: "01",
        name: "哺乳动物"
        value: 13,
        children: [
            {
                id: "0101",
                name: "猫科"
                value: 5,
                children: [
                    {
                        id: "010101",
                        name: "豹"
                        value: 2
                    }
                ]
            }
        ]
    }
]

例子是我随便举的，数据有多层，children有多个。虽然每次下钻我们都能很轻易地拿到children的值，然而上钻的时候要怎么处理呢？如何知道此时回到了第几层呢？还是利用标签自定义属性配合数据的id，只不过需要遍历处理。如下：

// 处理面包屑导航
handleBread(val) {
    if (val === "0000") return; // 0000为自己定义，表示最后一层，此时不做任何处理
    if (val === "") {           // 为空表示第一层，加载全部数据
        // 取出originalData，此为第一次请求后台拿到的数据，利用它来处理所需要的数据
        let type = [];
        this.state.originalData.map((item, ind) => {
            type.push(item.name)
        })
        this.setState({
            // graphData为图表所需的数据
            graphData: this.state.originalData,
            type,
        }, () => {
            // 调用方法重新初始化图表
            this.newGraph();
        })
    } else {
        // 如果是其他层数，那就遍历拿出每一项
        let result = [];                        // 存放结果
        let queue = [this.state.originalData];  // 用于遍历
        let item;           // 临时值
        while (item = queue.shift()) {          // 从队列里取出要转换的数据数组
            item.forEach(i => {
                result.push(i);                 // 遍历数组，转换数据，放入结果中
                i.children && queue.push(i.children);// 如果有子数据的，放到队列最后等待处理
            })
        }

        // 利用val来和id进行对比
        let children = [], type = [];
        result.map((item, ind) => {
            if (item.id === val) {
                children = item.children;
            }
        })

        // 此时取出的children就是我们需要的数据
        children.map((item, ind) => {
            type.push(item.name)
        })
        // 保存图表的数据
        this.setState({
            graphData: children,
            type,
        }, () => {
            // 图表初始化
            this.newGraph();
        })
    }

}

顺便补充一下，如果已经下钻到最后一层了，那么需要判断一下。然后标签的写法是：

$(".breadcrumb").append("<span class='bread' val='0000'>" + "面包屑名字" + "</span>");

其他的还是和上篇差不多，只不过自定义属性val的值这次是数据的id，而不是请求参数。