D3js get the array of keys to draw chart from json

问题

I have a json object which has multiple key and data inside, current code only takes first key object and draws it. I want each key to create a element, currently only takes first key and draws it.

Each key object element will be created dynamically. Please help with this

Json data which holds two objects and will increase as I keep adding dynamically:

    var processMain = {
            "process": [{
                "ProcessName" : "Record One", 
                "Username" : "Joh Doe", 
                "Created" : "10:00:00",
                'records': [
                  "Titles goes here",
                  "This is another title"
                ],
                'display': [
                  {
                    'question': "Question one",
                    'answer': "answer goes here"
                  },
                  {
                    'question': "Question Two",
                    'answer': "answer goes here"
                  }
                ]
            }],
            "chapterOne": [{
                "ProcessName" : "Second Record", 
                "Username" : "Joh Hoe", 
                "Created" : "10:00:00",
                'records': [
                  "Titles goes here",
                  "This is another title"
                ],
                'display': [
                  {
                    'question': "Question one",
                    'answer': "answer goes here"
                  },
                  {
                    'question': "Question Two",
                    'answer': "answer goes here"
                  }
                ]
            }]
        }; 

Working Fiddle so far I tried to get, for loop dosen't help me create expected elements: https://jsfiddle.net/vickyparab76/y0duk4je/3/

What I tried? Looping through keys but outputs more than expected elements

    for (var propName in processMain) {
        if (processMain.hasOwnProperty(propName)) {
          // console.log(propName);
        }
    }

HTML:

    <svg style="padding-top: 100px" class="chart">
      <marker id="arrow" markerWidth="10" markerHeight="10" refx="0" refy="3" orient="auto" markerUnits="strokeWidth" viewBox="0 0 10 10">
        <path d="M0,0 L0,6 L9,3 z" fill="#5091CF" />
      </marker>
    </svg>

JS:

var processMain = {
    "process": [{
        "ProcessName" : "Record One", 
        "Username" : "Joh Doe", 
        "Created" : "10:00:00",
        'records': [
          "Titles goes here",
          "This is another title"
        ],
        'display': [
          {
            'question': "Question one",
            'answer': "answer goes here"
          },
          {
            'question': "Question Two",
            'answer': "answer goes here"
          }
        ]
    }],
    "chapter-one": [{
        "ProcessName" : "Second Record", 
        "Username" : "Joh Hoe", 
        "Created" : "10:00:00",
        'records': [
          "Titles goes here",
          "This is another title"
        ],
        'display': [
          {
            'question': "Question one",
            'answer': "answer goes here"
          },
          {
            'question': "Question Two",
            'answer': "answer goes here"
          }
        ]
    }]
};

var data = processMain.process
// console.log(processMain[Object.keys(processMain)[0]]);

for (var propName in processMain) {
    if (processMain.hasOwnProperty(propName)) {
        // console.log(propName);
    }
}
d3.values(processMain).map(function(d) { 
    console.log(d.category); 
})

//initialize width and height
var width = 180,
    barHeight = 100;
    lineHeight = 100;

// selecting svg and setting the height of main element
var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", ((barHeight+lineHeight) * data.length));

//adding gropu for each process
var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * (barHeight+lineHeight+10) + ")"; });


//creating vertical line with arrow marker
bar.append('line')
    .attr("x1",width/2) 
    .attr("y1","0") 
    .attr("x2",width/2) 
    .attr("y2",lineHeight-15)
    .attr("transform","translate(0,-"+(lineHeight+5)+")")
    .attr("stroke","#5091CF") 
    .attr("stroke-width","2")
    .attr("marker-end","url(#arrow)")

//spawned process background
bar.append("rect")
    .attr("width", width)
    .attr("height", 15)
    .attr("x", 0)
    .attr("transform","translate(0,-"+(lineHeight*.85)+")")
    .attr("y", barHeight / 6 )

    .attr("fill", "#fff")
    .text(function(d) { return ''});

//spawned process text
var ltext = bar.append("text")
    .attr("text-anchor","middle")
    .attr("x", 0)
    .attr("class","spawned")
    .attr("transform","translate("+width/2+",-"+(lineHeight*.85)+")")
    .attr("y", barHeight / 4)
    .attr("dy", ".35em")
    .attr("fill", "#5091CF")
    .text(function(d) { return ''});
ltext.append("tspan")
    .attr("x",0)
    .attr("y", (barHeight / 4))
    .attr("dy", ".35em")
    .attr("text-anchor","middle")
    .text(function(d) { return "spawned process"; });

//process rectangle  
bar.append("rect")
    .attr("width", width)
    .attr("class","prect")
    .attr("height", barHeight - 1);

//process text
var text = bar.append("text")
    .attr("text-anchor","middle")
    .attr("x", 0)
    .attr("transform","translate("+width/2+")")
    .attr("y", barHeight / 4)
    .attr("dy", ".35em")
    .text(function(d) { return ''});

//process name
text.append("tspan")
    .attr("x",0)
    .attr("y", (barHeight / 4))
    .attr("dy", ".35em")
    .attr("class",'pname')
    .attr("text-anchor","middle")
    .text(function(d) { return d.ProcessName; });

//process user name
text.append("tspan")
    .attr("x",0)
    .attr("y", (barHeight / 3)*1.8)
    .attr("dy", ".35em")
    .attr("text-anchor","middle")
    .text(function(d) { return 'User : '+d.Username; });

//process created date
text.append("tspan")
    .attr("text-anchor","middle")
    .attr("x", 0  )
    .attr("y", (barHeight /3)*2.3)
    .attr("dy", ".35em")
    .text(function(d) { return 'Created : '+d.Created; });

//appending test
bar.append("g")
.attr("transform", function(d, i) { return "translate("+width+",0)"; })

.selectAll("li")
  .data(function(d) { return d.operation; })

.enter().append("circle")
  .text(function(d) { return d.hour + ": " + d.hits; });

expected output:

来源：https://stackoverflow.com/questions/54264880/d3js-get-the-array-of-keys-to-draw-chart-from-json