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

Question

我已经创建了一个基本流程图，但我不知道如何创建下一级流程图。 我附上图片和 jsfiddle 链接。

Fiddle

这是数据

 "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

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

顺便说一句：我注意到一些剪辑，在 JS fiddle 中它帮助我临时设置了 svg 标记的宽度：

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

我可以尝试两种方法：

1. 创建一个空的group 与每个进程rect 关联，var ops = chart.selectAll("g g"); 然后找出正确的方法来获取对绑定到每个父级g 的数据点的引用，让我们通过dp 引用它。然后执行ops.selectAll("g").data(dp.operation).enter().append("g"); 在每次输入时将第一行绘制到分叉处。然后与该组的组中的每个操作一起绘制两条操作线，操作圈和标签类似于您之前所做的工作。请注意，我在获取对 dp 的引用时很模糊。可能类似于：bar.each(function(dp,i,t){d3.selectAll(t).data(dp.operation).enter().etc;});
2. 可能手动设置正确的选择。假设您在“追加测试”中设置了空的第二个 g，手动设置看起来有点像：data.forEach(function(dp, idx, arr){bar[idx].data(dp.operation).enter().etc;}) 我希望 bar selectAll 的索引与data 的。它们的数量会匹配。

在尝试使用 #1 时，我最终得到了这个，以达到您想要的位置的一部分。这当然不是很漂亮，但是每个进程都有 1 行到一个组，然后在每个组中，每个操作都有 1 个圆圈和 1 行（你必须添加行、箭头和标签，这有点奇怪我得到了偏移量）：

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