D3の単一データ反復で複数のアイテムを描画するにはどうすればよいですか？

Question

私はd3.jsで作業しており、データ使用に関するいくつかの助けが必要です。 私はd3とバインドし、プロット内の要素をレンダリングするデータ配列を持っています。今現在、私は項目ごとにデータを複数回結合してい

---

O-----------O   O---------O 
     O----------O 

：ドット、ラインやドットを終了、次のようにのようなものを開始し、同じようしかし、各プロット項目は、複数のセクションを持っている 、手順は

は、全ての出発点は、レンダリング

1. バインドデータアレイである
2. バインドデータアレイ
3. は
4. がすべて終了ドット

この方法で問題のレンダリングの順序でレンダーすべてのラインのドットが

バインドデータ配列レンダリングします。あるプロットアイテムが別のプロットアイテム上にレンダリングされた場合、最初のアイテムの最後のドットは2番目のプロットアイテムのライン上にレンダリングされます。別の問題は、プロットアイテムを操作したい場合、プロットアイテムが文法的に関連していないので、1つのプロットアイテムのすべてのビットとピースをトレースすることは問題です。

今、私の質問は（ドット、ラインと終了点を開始）一緒にすべての要素を一度データをバインドしてレンダリングする方法はありますか？レンダリングの順番は正しいですか？ （この場合、2番目のプロット項目のすべての要素が1番目のプロット項目に表示されます）。

var lineSelection = PlotGroup.selectAll(".Line") 
          .data(EventList); 
lineSelection .enter() 
       .append("line") 
       .attr("class", "Line gline") 
       .attr("x1", function (d) { 
        return XScale(d.startTime); 
       }) 
       .attr("y1", (_Position)) 
       .attr("x2", function (d) { 
       return XScale(d.endTime); 
       }) 
       .attr("y2", (_Position)); 

var RectInSelection = PlotGroup.selectAll(".RectIn") 
           .data(EventList); 

RectInSelection.enter() 
       .append("rect") 
       .attr("class", "RectIn") 
       .attr("x", function (d) { 
        return XScale(d.startTime); 
       }) 
       .attr("y", function (d) { 
        return _Position; 
       }) 
       .attr("width", 16) 
       .attr("height", 16); 

var RectOutSelection = PlotGroup.selectAll(".RectOut") 
           .data(EventList); 

RectOutSelection.enter() 
       .append("rect") 
       .attr("class", "RectOut") 
       .attr("x", function (d) { 
        return XScale(d.endTime); 
       }) 
       .attr("y", function (d) { 
        return _Position; 
       }) 
       .attr("width", 16) 
       .attr("height", 16); 

Answer 1

私はデータと同じ数のグループを作っていましたが、各グループには線と矩形があります。これにより、重複する問題と複数のデータバインディングの問題が修正されます。

var groups = PlotGroup.selectAll(".mygroup") 
          .data(EventList) 
          .enter() 
          .append("g") 
          .classed("mygroup", true); 
       //make line in the group 

       groups.append("line") 
       .attr("class", "Line gline") 
       .attr("x1", function (d) { 
        return XScale(d.startTime); 
       }) 
       .attr("y1", (_Position)) 
       .attr("x2", function (d) { 
       return XScale(d.endTime); 
       }) 
       .attr("y2", (_Position)) 

       //make in rectangle 
       groups.append("rect") 
       .attr("class", "RectIn") 
       .attr("x", function (d) { 
        return XScale(d.startTime); 
       }) 
       .attr("y", function (d) { 
        return _Position; 
       }) 
       .attr("width", 16) 
       .attr("height", 16); 

       //make out rectangle 
       groups.append("rect") 
       .attr("class", "RectOut") 
       .attr("x", function (d) { 
        return XScale(d.endTime); 
       }) 
       .attr("y", function (d) { 
        return _Position; 
       }) 
       .attr("width", 16) 
       .attr("height", 16)