reactjs - 我想生成一个图表作为基于 json 的层次结构反应

Question

我想基于 json 在 React 中生成一个图表，它将具有节点和子节点的层次结构，并且它还应该有一个分组。例如，请参阅随附的屏幕截图，

你能帮我用最好的 npm 包来实现这一点吗？

示例 JSON：

{ "code":"0000", "status":"success", "data":{ "id":"892", "name":"Test 1", "title":"这是一个初始测试新脚本", "children":[ { "id":"hm_890", "title":"Campaign Coordinator, Stakeholder", "name":"Neil Armstrong", "first_name":"Neil", "last_name" :"Armstrong", "team_name":"Test", "color":"Red", "children":[ { "id":"hm_890", "title":"User", "name":"Neil Armstrong ", "first_name":"Neil", "last_name":"Armstrong", "color":"Red" } ] }, { "id":"hm_891", "title":"Manager", "name":"Jacque Nottage", "first_name":"Jacque", "last_name":"Nottage", "team_name":"Sales", "color": “红色”，“儿童”：[ { “id”：“hm_989”，“标题”：“用户”，“名称”：“Bart Gott”，“first_name”：“Bart”，“last_name”：“Gott” , "color":"Red" }, { "id":"hm_990", "title":"User", "name":"Tom Gracey", "first_name":"Tom", "last_name":"Gracey ", "颜色":"红色" } } ] }
}Jacque Nottage", "first_name":"Jacque", "last_name":"Nottage", "team_name":"Sales", "color":"Red", "children":[ { "id":"hm_989", “标题”：“用户”，“名称”：“巴特戈特”，“名字”：“巴特”，“姓氏”：“戈特”，“颜色”：“红色”}，{“id”：“hm_990” , "title":"用户", "name":"Tom Gracey", "first_name":"Tom", "last_name":"Gracey", "color":"Red" } } ] } }Jacque Nottage", "first_name":"Jacque", "last_name":"Nottage", "team_name":"Sales", "color":"Red", "children":[ { "id":"hm_989", “标题”：“用户”，“名称”：“巴特戈特”，“名字”：“巴特”，“姓氏”：“戈特”，“颜色”：“红色”}，{“id”：“hm_990” , "title":"用户", "name":"Tom Gracey", "first_name":"Tom", "last_name":"Gracey", "color":"Red" } } ] } }“红色”，“儿童”：[ { “id”：“hm_989”，“标题”：“用户”，“名称”：“Bart Gott”，“first_name”：“Bart”，“last_name”：“Gott” , "color":"Red" }, { "id":"hm_990", "title":"User", "name":"Tom Gracey", "first_name":"Tom", "last_name":"Gracey ", "颜色":"红色" } } ] } }“红色”，“儿童”：[ { “id”：“hm_989”，“标题”：“用户”，“名称”：“Bart Gott”，“first_name”：“Bart”，“last_name”：“Gott” , "color":"Red" }, { "id":"hm_990", "title":"User", "name":"Tom Gracey", "first_name":"Tom", "last_name":"Gracey ", "颜色":"红色" } } ] } }用户”，“姓名”：“汤姆·格雷西”，“名字”：“汤姆”，“姓氏”：“格雷西”，“颜色”：“红色”} ] } }用户”，“姓名”：“汤姆·格雷西”，“名字”：“汤姆”，“姓氏”：“格雷西”，“颜色”：“红色”} ] } }

标签： reactjshierarchical-data