Javascript 如何在d3js中创建下一级流程图

我已经创建了一个基本流程图，但我不知道如何创建下一级流程图。 我正在附加图像和JSFIDLE链接

这是数据

 "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" 
                }], 
            }
        ]}

---

您正在手动绘制此图（我假设流程图是指表示d3布局的图表），您的数据数组有3个数据点，因此这将直接映射到3个绘制的对象。我可以看到您的代码（您也应该将其附加到问题中）正在为每个数据点绘制带有两个矩形（标签下文本）和四条文本的线条，但是它没有处理数据点中的任何操作数组

旁白：我注意到一些剪辑，在JS fiddle中，它帮助我临时设置了

svg

标记的宽度：

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

---

你告诉我“你是手工绘制的”，还有别的好方法吗？因为我是新手d3js@LoveTrivedid3js运行得很快，所以我看到你写了“流程图”，认为“图表是d3中的布局”，然后想嘿，我不知道有流程图布局。可能在某个地方有一个附加组件，但手动通常是正确的方法。

//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");
  }});