0

I am busy customizing the Zoomable Icicle Layout in D3 to visualize a file hierarchy.

I have a filter which makes use of the answer on this question: How to filter children based on whether the parent is filtered in D3?

I have an arrow that is added to each folder that has hidden information (currently the arrow is just shown for all), so that if a user clicks the arrow, the next folder that was hidden is shown and the current folder is moved on or hidden which results in a horizontal scroll-like action which can be seen when using a calendar to scroll through the months.

Does anyone know how to handle this with the filters and how to update the layout with the folder that needs to be displayed on arrow click and then how to hide the currently displayed folder? It will obviously influence sub-folders within those folders as well.

NOTE: I need to display the sub-folders as well i.e. the folder's sub-tree

Here is the example code in a fiddle: jsfiddle.net/Sim1/vByL6/1/

Many thanks!

Community
  • 1
  • 1
sim1
  • 457
  • 1
  • 7
  • 26
  • Nothing's currently happening when I click on the box or arrow in that fiddle. What is it supposed to be doing so far? – AmeliaBR Feb 09 '14 at 20:22
  • I just had an on click to check if it would work...it currently does not do anything...i'm not really sure how to go about this. I would need to get the item who's arrow was clicked on and then get the next sibling and update the layout to show that item and move the clicked on item to the left or hide it. Or that's the process I'm assuming...can I do something like that? I'm just also unsure about this because of the filters -the hidden items are then not included in the data that is used to display the layout.... – sim1 Feb 09 '14 at 20:44
  • In the click function you have access to the data object (The click function should be of the form `function(d,i)`), which includes a link to the parent data object in the tree, from which you can get all the siblings as the array `d.parent.children` (or possibly `d.parent._children`, depending on how you implemented the filters...). Then you find the index of `d` in that array, and can work from there to find the next sibling. – AmeliaBR Feb 09 '14 at 21:49
  • Hi Amelia. Thanks for your comment - that makes a lot of sense. So once I've found the sibling that needs to be shown, how would I display it? I would need to add it somehow back again after being filtered out. I also need to hide the rect who's arrow was clicked on. And then would I be able to use the function you mentioned for another question (http://stackoverflow.com/questions/20788827/how-to-filter-children-based-on-whether-the-parent-is-filtered-in-d3) to update the layout? – sim1 Feb 11 '14 at 22:53
  • It depends if you only want to show *this particular file*, in which case I would just hide the sibling and draw the new file object in its place, or if you wanted to show the *entire sub-tree* of children of the sibling, in which case what you probably want to do is modify your filter function so that you can have a data variable that forces an element to be shown or hidden, regardless of other filter variables. Then when the user clicks to show a hidden file, get the data object from the children array as described above, change this variable, and then redraw the graph. – AmeliaBR Feb 12 '14 at 02:32
  • Thanks for the comment - I would need to show the sub-tree of the item to be shown as well. So the variable will be assigned to all items in the filter representing "show" or "hide" and then I would redraw the graph based on the items that have a "show" value?? Wouldn't that still leave place for the item in the layout similar to an issue I had before here: http://stackoverflow.com/questions/20752242/need-to-recalculate-partition-layout-after-filter-in-d3 ? Apologies if I've misunderstood your comment... – sim1 Feb 12 '14 at 11:52
  • @AmeliaBR could you please elaborate on the method to show the entire sub-tree? I have found the sibling that needs to be shown but am having difficulty in displaying it - what I need to do for now is just add it in to the layout. – sim1 Feb 20 '14 at 14:16
  • I was just suggesting re-calling the entire layout update/redraw function for the entire visualization, with a filter similar to what you'd been using to filter by date, but which now also checks for the show/hide data parameter. Alternately, you could pass the sibling element as a "root" node to a *new* partition layout, with the size of that partition being restricted only to the size of the object you're replacing. But then your scale would be different between the subtree and the rest of the layout. – AmeliaBR Feb 20 '14 at 19:32
  • Thanks @AmeliaBR . I have the sibling and an update function - it even picks up the sibling in the enter() as a new node, but it does not add it to the layout, gives the x position as the width and the width as 0. What would be best positions to assign to the new sibling and to update the existing items? – sim1 Feb 20 '14 at 19:55
  • Hmm. Sounds like the problem is that this particular node is getting forced into your layout, but none of its children are included (i.e., they don't satisfy the rest of the filter), therefore it's being given a zero size. You could propagate the show/hide setting on to the children (i.e., set the values to match the parent) in the loop where you push the child data objects into the filtered array. – AmeliaBR Feb 20 '14 at 20:58
  • 1
    Hi @AmeliaBR, you are a star! That was exactly what was happening and I only registered that it was that from reading your comment. I had the sibling, but not its children. It gets added in now...so relieved! I still have quite a bit of functionality to add on to the filter to finalize it now that this is working - when it's completed, I will post a link to a fiddle. Many thanks. My only worry now is if the sibling is indeed a leaf with no children, that it might not add it in then....or will it? – sim1 Feb 21 '14 at 22:53

0 Answers0