Question

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

这是数据

 "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个绘制的对象。我可以看到你的代码（你应该附加到问题上）是用两个rects（在标签文本下）和每个数据点的四个文本绘制线条，但是它不处理数据点中的任何操作数组。

抛开：我注意到一些裁剪，在JS小提琴中它帮助我暂时设置svg标签的宽度：

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

我可能会尝试两种方法：

创建一个与每个进程rect g相关联的空var ops = chart.selectAll("g g"); roup，然后找出正确的方法来获取对绑定到每个父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");
  }});

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

1 个答案: