我已经创建了基本流程图,但是我没有得到如何创建下一级别的流程图。
我附上图像和jsfiddle链接。

Fiddle

javascript - 如何在d3js中创建下一级别的流程图-LMLPHP

这是数据

 "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小提琴中,它帮助我临时设置了宽度的svg标记:

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

我可以尝试两种方法:
  • 创建一个与每个进程rect相关联的空g roup,然后var ops = chart.selectAll("g g");找出正确的方法来获取对绑定(bind)到每个父g的数据点的引用,让dp对其进行引用。然后在每个输入上执行ops.selectAll("g").data(dp.operation).enter().append("g");,将第一行绘制到 fork 。然后,与该组的组中的每个操作一起绘制两条操作线,操作圆和标签,它们与您之前所做的工作相似。请注意,我对获得dp的引用感到困惑。可能类似于:bar.each(function(dp,i,t){d3.selectAll(t).data(dp.operation).enter().etc;});
  • 可能手动设置正确的选择。假设您像“追加测试”中那样空了第二个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");
      }});
    

    关于javascript - 如何在d3js中创建下一级别的流程图,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37282177/

    10-12 00:25
    查看更多