last day (14 days later) » 

2:30 PM
2
A: D3.js Process Diagram

MarkNEW ANSWER Thinking about this last night and I decided my naive approach is to hackish and brute-force. The problem is that by introducing a second array of children (the subprocess array) and placing those nodes directly, you lose the magic of d3.tree. You lose it's ability to walk the paren...

 
@pritishvaidya, good catch, thanks. It's now fixed.
 
Thank you for this answer. I only have one more question: I tried inserting a children within a subprocess and it is not showing up. Perhaps I formatted the JSON incorrectly? var treeData = { "name": "File 2", "children": [{ "name": "File 3", "subprocess": [{ "name": "File 4", "children": [{ "name": "File 6" }] }], "children": [{ "name": "File 5" }] }, ] };
 
@Clarinetist, hmm, can it be assumed that a sub-process will only ever have one child?
 
@Mark A sub-process can have (theoretically) an unlimited amount of children. Regardless, every child contained in a subprocess should be pointing down from the subprocess node.
 
@Clarinetist, re-wrote my answer completely. I think the new approach is a lot more sound and less hacky.
 
2:30 PM
Thank you. The solution is very useful. I can put this as a new question, if you prefer, but if I wanted to keep adding nodes below File 6, how would I go about doing this? Inserting a children level seems to not change the x and y value of the new node and places it on top of the File 6 node.
 
@Clarinetist, fixed! Run the code above again.
 
Thank you, I knew there was something going on with the depthtoSub when I was trying to sort this out. I appreciate the time you've put into this. Thanks again!
 
@Clarinetist, turning out to be a complicated, cool piece of code. Let me know if it needs further tweaking.
 
I'm wondering if I could get a chat going for this...
Here we go
There's only one more tweak that I can think of that I would like to have
 
What's that?
 
2:31 PM
Here is my current treeData
`var treeData = {
"name": "File 1",
"children": [{
"name": "File 3",
"children": [{
"name": "File 5"
}, {
"name": "File 4",
"type": "subprocess", //<-- this is a subprocess with children
"children": [{
"name": "File 6",
"children": [{
"name": "File 7",
"type": "output"
}]
}]
}]
}]
};`
Notice how File 7 has type output
What I would like to do is for each node that has a type of output, use a rectangular node.
The nodeEnter seems to have rather complicated attributes
 
That's do-able. I have to go to work at the moment, check back later.
 
No problem, thank you!
What I would've done is loop through the nodeEnter and gotten the type out of the data
and then written some sort of conditional
but it doesn't seem to be as simple as I thought it'd be
I appreciate your assistance with this :)
 
2:48 PM
Still here?
 
Yep
 
Thank you very much! That's all I'll need for this. @Mark I hope to get better with D3.js eventually. It's quite fascinating!
I appreciate your patience with helping me with this. Thanks again!
 
Have a good day. Good luck with your future d3ing
 

last day (14 days later) »