我已经创建了基本流程图,但是我没有得到如何创建下一级别的流程图。
我附上图像和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"
}],
}
]}
最佳答案
您是手动绘制的(我假设流程图是指表示d3布局的图表),您的数据数组具有3个数据点,因此它将直接映射到3个绘制的对象。我可以看到您的代码(您也应该附加到问题上)正在为每个数据点绘制带有两个矩形(在标签文本下方)和四个文本的线,但是它没有处理该数据点中的任何操作数组。
旁白:我注意到一些剪裁,在JS小提琴中,它帮助我临时设置了宽度的svg
标记:
<svg style="padding-top: 100px; width:100%" class="chart">
我可以尝试两种方法:
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/