d3-hierarchy | d3-hierarchy 中文

I have been trying to reproduce this ObservableHQ code on horizontal collapsible tree (the second example) into regular html-css-js format. Below is my implementation.

I am learning how to handle data through D3.js and D3's hierarchy at the moment but can't get my head around sorting a map of maps structure.

Given the following dataset

I have a simple D3 treemap.

When a user clicks the treemap, I'd like to show a subset of the data. My goal is to have each of the cells in the update resize, so that all the blue cells fill the original blue cell area, the red cells fill the original red cell area, and so forth.

I thought d3.treemapResquarify would magically take care of this, but I'm clearly missing something!

I am working on a D3.js V4/5 implementation of building a vertical flow-chart. I am adding a new node to the flow-chart's decision box by clicking on a "decision" box and it's corresponding "diamond"/"rect" shape.

From Mike Bostocks answer here for adding/removing nodes :- https://github.com/d3/d3-hierarchy/issues/139 I've followed step 1 which is :- "Derive an entirely new tree by calling d3.hierarchy after modifying your data (or passing in a different children accessor function to do filtering".

So when a user tries to add a new node I am modifying the actual tree/children , computing the hierarchy and calling the update() method. Something like below

JS Fiddle:- http://jsfiddle.net/rs3owt6g/6/

I am trying to delete a node in a d3 tree by directly modifying the treeData ( Following Mike Bostocks suggestion here for adding/removing nodes :- https://github.com/d3/d3-hierarchy/issues/139 ).

I am able to remove the node, but somehow the link does not go away.

jsFiddle:- http://jsfiddle.net/1sr5tbLx/1/

Steps to reproduce issue in Fiddle:- To remove a node( for now) you would have to click on the node, you will find orange svgs -- > select the right top "rectange" svg. That should delete the node.

On click of this orange rectangle I am calling the method --> removeSelectedNode() ( with the selected node) and it finds the parent node and removes the child index and then I am then recalculating the root details and calling the update tree once again ( Not sure if there is a better way to do this update ).

I have the below code for an indented tree. I am wanting to collapse the tree by default and have only the 1st level children show or the root node, doesn't matter. I have tried a couple approaches that I thought would work without success, and the current portion below I thought would do the trick:

I have an array of objects and I would like to convert it into a different array. Each object in the original array has a category key and I would like the final result to group objects by category. I am trying to use the reduce method to do this but can not make sense of the examples I have found.

original array:

I am working on creating a Treemap from a csv file. The data in the csv file is hierarchical and looks like this example that I stole from another Stack Overflow question

I have a large CSV structured like this: