D3がステップの前に、他の要素

Question

間の経路を描くIは、の形で多次元配列のデータを持っている：

data = [ 
    [ 
    { 
    "x": 329, "y": 484.8333333333333 
    }, 
    { 
    "x": 439, "y": 484.8333333333333 
    }, 
    { 
     "x": 439, "y": 484.8333333333333 
    }, 
    { 
     "x": 549, "y": 484.8333333333333 
    } 
    ], [ 
    { 
     "x": 559, "y": 484.8333333333333 
    }, 
    { 
     "x": 669, "y": 484.8333333333333 
    }, 
    { 
     "x": 669, "y": 484.8333333333333 
    }, 
    { 
     "x": 779, "y": 484.8333333333333 
    } 
    ], [ 
    { 
     "x": 329, "y": 313.8333333333333 
    }, 
    { 
     "x": 439, "y": 313.8333333333333 
    }, 
    { 
     "x": 439, "y": 253.83333333333331 
    }, 
    { 
     "x": 549, "y": 253.83333333333331 
    } 
    ], [ 
    { 
     "x": 559, "y": 313.8333333333333 
    }, 
    { 
     "x": 669, "y": 313.8333333333333 
    }, 
    { 
     "x": 669, "y": 253.83333333333331 
    }, 
    { 
     "x": 779, "y": 253.83333333333331 
    } 
    ], etc. 
] 

各アレイは、2つのSVG要素を接続する一歩、前パスの座標です。

stepFuction = d3.svg.line() 
    .x(function(d) { return d.x; }) 
    .y(function(d) { return d.y; }) 
    .interpolate("step-before"); 

私はそうのようなパスインスタンス化しようとしています：私はパスを生成する関数を定義した

step = svg.selectAll("path") 
     .data(_.each(stepData, (d) => { return d; })) 
     .enter() 
     .append("path") 
     .attr("class", "line") 
     .attr("d", stepFuction); 

むしろステップの前にパスよりは、私が探して蝶ネクタイを取得しています形状（添付資料参照）。明らかに、私は間違った何かをしています、私はそれがデータメソッドの内部で_を使用して何かを持っていると仮定しています。

1）データ配列に配列ごとに1つのパスを作成する正しい方法は何ですか？

この要素をドラッグして、これらのパスを更新したいと考えています。

node.attr（ "x"、function（d）{return dx - d.width/2 + pad;}ノード、ラベル、およびグループにd3.on（ "tick"）を使用しています。 ）; .attr（ "y"、function（d）{return dy-d.height/2 + pad;}）;

正しく動作していますが、パスを更新する方法がわからないのは、各ティックごとに再計算する必要がある複数の値があるためです。

2）各ティックでこれらのステップ・ビフォア・パスを更新する正しい方法は何ですか？

何かが私の説明では明確ではなかった場合、私はバイオリンを作成しました：

d3 step-before fiddle

Answer 1

私は、これはスタイリングをどうする実際だと思います。

Fiddle

を追加しました。このCSSコード：

path { 
    stroke-width: 1px; 
    fill: none; 
    stroke: black; 
}