How to draw multiple item in single data iteration in D3? - d3.js

Question

I am working with d3.js and need some help regarding data usage.
I have a data array that I bind with d3 and render elements in my plot.
However, each plot item has multiple section, like, starting dot, line and ending dot, something like as below:
O-----------O O---------O
O----------O
Now currently, I am binding the data multiple times for each of the items, the steps are,
Bind data array
Render all starting dots
Bind data array
Render all Line dots
Bind data array
Render all ending dots
the problem in this method is order of rendering. if one plot item rendered over another plot item, the ending dot of the first item will be rendering over the line of 2nd plot item. Another issue is if I want to manipulate a plot item, it is problematic to trace all bits and pieces of a single plot item as they are not related in the plot grammatically.
Now my question is is there any way to bind the data once and render all elements (start dot, line and end dot) together? so that the order of rendering is correct? (in this case all elements of 2nd plot item will render over the 1st plot item).
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

I would have made as many groups as data, and to each group i would have made the line and rectangles. This will fix the overlapping issue and multiple data binding issue.
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)
Hope this helps!