How to create next level of flow chart in d3js

Question

I have created a basic flow chart but I am not getting that how to create next level of flow chart. I am attaching the image and the jsfiddle link.

Fiddle

here is the data

 "process":[
            { 
            "ProcessName" : "nivprocess.exe", 
            "Username" : "Joh Doe", 
            "Created" : "10:00:00", 
            "processDescription" : null, 
            "process_parent" : null, 
            "operation" : [
                {
                "operationDescription":"OP1",
                "operationTime":"10:15:15",
                "response":"Fail" 
                },{
                "operationDescription":"OP2",
                "operationTime":"10:20:00",
                "response":"Success" 
                }
                ], 
            },
            { 
            "ProcessName" : "Process2.exe", 
            "Username" : "Some One", 
            "Created" : "11:00:00", 
            "processDescription" : null, 
            "process_parent" : "process1", 
            "operation" : [
                {
                "operationDescription":"OP1",
                "operationTime":"10:15:15",
                "response":"Fail" 
                },{
                "operationDescription":"OP2",
                "operationTime":"10:20:00",
                "response":"Success" 
                }], 
            },
            { 
            "ProcessName" : "Process3.exe", 
            "Username" : "Nika Boka", 
            "Created" : "12:00:00", 
            "processDescription" : null, 
            "process_parent" : "process2", 
            "operation" : [
                {
                "operationDescription":"OP1",
                "operationTime":"10:15:15",
                "response":"Fail" 
                },{
                "operationDescription":"OP2",
                "operationTime":"10:20:00",
                "response":"Success" 
                }], 
            }
        ]}

Answer 1

You're drawing this manually (I assumed the flow chart meant a chart meaning a d3 layout), your data array has 3 data points so this will map to 3 drawn objects directly. I can see your code (which you should attach to the questions too) is drawing lines with two rects (under label text) and four pieces of text for each data point, however it's not processing any of the operation arrays in the data point.

An aside: I'm noticing some clipping, in JS fiddle it helped me to temporarily set the svg tag with a width:

<svg style="padding-top: 100px; width:100%" class="chart">

There's two approaches forward I might try:

1. Create an empty g roup associated with each process rect, var ops = chart.selectAll("gg"); then figure out the right way to get a reference to the data point bound to each parent g , lets refer to it by dp . Then do ops.selectAll("g").data(dp.operation).enter().append("g"); On each enter draw that first line to the fork. Then work with each operation within this groups' groups' group to draw the two operation lines, the operation circle and labels similar to work you did before. Notice I'm fuzzy on getting the reference to dp . It might be something like: bar.each(function(dp,i,t){d3.selectAll(t).data(dp.operation).enter().etc;});
2. Possibly manually setup the right selections. Assuming you made that empty second g like in the "append test", manual setup would look a bit like: data.forEach(function(dp, idx, arr){bar[idx].data(dp.operation).enter().etc;}) where I'm hoping the bar selectAll 's indexes are in the same order as the data 's. They will match in quantity.

While trying to go with #1, I ended up getting this to get part of the way to where you wanted. It certainly isn't pretty, but you get 1 line to a group for each process, then in each group 1 circle and 1 line for each operation (you'll have to add lines, arrows and labels, and it's a bit weird how I get the offsets):

//appending test
  var ops = bar.append("g");
  ops
  .attr("transform", function(d, i) {
      return "translate("+width+",0)";
   });
   ops
    .append('line')
    .attr("x1","0")
    .attr("y1",lineHeight/2) 
    .attr("x2",width/8) 
    .attr("y2",lineHeight/2) 
    //.attr("transform","translate(0,-"+(lineHeight*.85)+")")
    .attr("stroke","#FF0000") 
    .attr("stroke-width","4");

  ops.each(
  function(d,i,t){
  if ('object'===typeof this) {
  var op = d3.select(this).selectAll('g').data(d.operation).enter().append("g");
  var xc=1;
  op.append("circle")
    .attr("cx",lineHeight)
    .attr("cy",function(d){return lineHeight/2*xc++-lineHeight/4})
    .attr("r",width/4)
    .attr("fill", "#ff0000");
  var xl1s=1;
  var xl1e=1;
  op.append("line")
    .attr("x1",width/8)
    .attr("y1",function(d){return lineHeight/2-width/4-lineHeight/4*xl1s++})
    .attr("x2",lineHeight)
    .attr("y2",function(d){return lineHeight/2-width/4-lineHeight/4*xl1e++})
    .attr("stroke","#FF0000") 
    .attr("stroke-width","4");
  }});