d3jsで次のレベルのフローチャートを作成する方法

Question

基本的なフローチャートを作成しましたが、次のレベルのフローチャートを作成する方法がわかりません。 イメージとjsfiddleリンクを添付しています。ここ

Fiddle

あなたは（私はフロー・チャートは、D3のレイアウトを意味し、チャートを意味仮定）この手動を描画しているデータが

"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

で、あなたのデータ配列を持っていますこれは3つの描画オブジェクトに直接マッピングされます。私は（あなたも質問に添付する必要がありますあなたのコードを参照してください）2つの矩形（ラベルテキストの下）と各データポイントの4つのテキストで線を描くですが、データポイント内の操作配列を処理していません。余談

アン：私は、JSのフィドルに、それは一時的に幅のsvgタグを設定するために私を助け、いくつかのクリッピングを気づい：

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

二つのアプローチが前方にあります私が試してみてください：

を
1. 空のgルートを作成し、各プロセスの矩形var ops = chart.selectAll("g g");に関連付けて、各親にバインドされたデータポイントへの参照を取得する適切な方法を見つけてdpで参照してください。次に、ops.selectAll("g").data(dp.operation).enter().append("g");を実行して、それぞれの行に最初の行を入力します。次に、このグループ 'グループ'グループ内の各操作を操作して、2つの操作ライン、操作サークル、および前の作業と同様のラベルを描画します。通知私はdpへの参照を取得する上で不明です。 bar.each(function(dp,i,t){d3.selectAll(t).data(dp.operation).enter().etc;});
2. おそらく手動で正しい選択肢を設定してください。その空の秒を空にしたと仮定すると、 "追加テスト"のように、手動設定は少しのように見えます。data.forEach(function(dp, idx, arr){bar[idx].data(dp.operation).enter().etc;})barselectAllのインデックスは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"); 
    }});